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Sobre o autor 


Mauricio Samy Silva e graduado em Engenharia Civil pelo Institute) Militar de 
Engenharia (IME). Fundador e ex-diretor-presidente da Planep Engenharia, 
exerceu o magisterio paralelamente a Engenharia, tendo sido, ao longo de 25 
anos, professor de Geometria Descritiva e Matematica. Seu primeiro contato 
com programa^ao para computadores deu-se ainda quando aluno, ao aprender 
a linguagem Fortran. Aquela epoca, era comum passarem-se noites trabalhando 
em uma maquina perfuradora de cartoes que seriam processados em um entao 
poderoso IBM/360. Em 1982, adquiriu seu primeiro computador pessoal, um 
TK-80 com proccssador Z-80A de 3,25MHz, tcclado de membrana com 40 tcclas 
e memoria RAM de 1KB expansivel ate 16KB.Trabalhou com os modelosTK-82, 
TK-85,TK-2000, DGT-100 e assim por diante, ate os dias atuais. 

Sua experiencia com desenvolvimento de sites iniciou-se em 1999, com o 
FrontPage, considcrada uma ferramenta sensacional na constru^ao de sites. Em 
2002, por acaso tevc seu primeiro contato com o site do W3C e, como ficou vi- 
vamente impressionado com a proposta desse consorcio, come^ou a pesquisar e 
a estudar as Web Standards, tendo como fonte de consulta o material publicado 
na internet em lingua inglesa. Ao contrario do que ocorre nos dias atuais, quan¬ 
do varios desenvolvedores escrevem em blogs pessoais sobre Web Standards, a 
literatura a respeitodoassuntoem portugues era, entao, praticamente nula, mas, 
mesmo assim, quando encontrada, limitava-se ao basico do basico. 

No segundo semestre de 2003, estimulado pela completa falta de material 
de consulta gratuita na internet e impulsionado por sua veia de educador de- 
senvolvida durante anos cm sala de aula, dccidiu lan^ar o site CSS para Web 
Design, o qual e nacionalmente conhecido como o site Maujor, hospedado cm 
http://wvAv.maujor.com/. A proposta inicial do site era a de divulgar a cascading style 
sheet (CSS), ou folha de estilo em cascata, com base no compartilhamento de 
suas experiences com tal tecnica. Com a pronta aceita^ao e o sucesso crescente 
do site, o objetivo inicial tornou-se mais ambicioso e passou a ser a divulgagao 
das Web Standards. 


13 

Material com direitos autorais 



14 


jQuery ■ A Biblioteca do Programador JavaScript 


No inicio de 2006, com a populariza^ao c a adcsao maciga aos blogs, criou o 
Blog do Maujor hospcdado cm http://wwv.maujor.com/blog/, com proposito scmc- 
lhante ao do site, mas com uma dinamica mais ativa e a efetiva participagao de 
seus leitores. 

Tanto o site como o blog constituem-se cm referenda nadonal para Web 
Standards e, sem duvida, foram e continuant sendo urn dos grandes responsaveis 
pela divulgagao e popularizagao das Web Standards, assim como, em particular, 
das CSS no Brasil. 

Maujor, como e conhecido o autor, e ainda um ativo frequentador de foruns, 
escreve para varios portais brasileiros voltados a desenvolvedores vveb, c autor 
de artigos em ingles e de trabalhos relacionados as CSS publicados em sites in- 
ternacionais sobre Web Standards. Ocupa o segundo lugar na lista de tradutores 
mundiais de documentos do W3C por quantidade de documentos vcrsados. 
Publicou em scu site mais de 40 tradugoes de artigos sobre Web Standards 
escritos por consagrados autores internacionais. Traduziu para o portugucs as 
ferramentas para testes de accssibilidadc em sites, denominadas Analisador de 
contraste de cores e Barra de ferramentas para acessibilidade na vveb, ambas em 
parceria com o WAT-C, um consorcio australiano voltado ao desenvolvimento 
de ferramentas destinadas a testes de acessibilidade. 
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Lste livro tem por objetivo fornecer aos profissionais envolvidos com o desen- 
volvimento para a web os conceitos fundamentais e tecnicas de programagao 
necessarias ao emprego da biblioteca jQuery na cria^ao dc efeitos espcciais e 
obten^ao de comportamentos de variadas naturezas em sites web, tornando-os 
mais interativos e visualmente mais agradaveis e amigaveis. Aborda o uso da 
linguagem de programagao JavaScript segundo a sintaxe especificamente criada 
para fazer funcionar e tornar usavel a biblioteca jQuery. 

O livro csta dividido em duas partes como dcscrito a seguir. 

Primeira parte - Fundamentos teoricos da biblioteca jQuery 

A primeira parte compreende os capitulos de 1 a 7 e tem por objetivo apresentar a 
biblioteca, examinar sua sintaxe geral e estudar o emprego e finalidade dos metodos, 
propricdadcs c diferentes funcionalidades disponiveis na biblioteca JQuery 

No estudo dos metodos, adotou-se um modelo que consiste na apresenta^ao 
da sintaxe do metodo seguida de uma explicagao da sua finalidade, em um pe- 
queno trecho dc codigo de emprego real demonstrando o uso geral do metodo 
e, finalmente, na disponibiliza^ao de um arquivo HTML para download ou 
consulta on-line, hospedado no site do livro, contendo a demonstra^ao pratica 
do metodo estudado. 

Segunda parte - jQuery na pratica 

A segunda parte do livro compreende os capitulos de 8 a 14 e tem por objetivo de- 
monstrar efeitos jQuery de variadas naturezas e de emprego real em um site. 

Cada capitulo desta parte esta estruturado para estudar efeitos em elementos 
especificos do HTML. O capitulo 8 introduz a parte pratica do livro e dedica-se 
ao estudo dos efeitos de animagao basicos com enfase nas tecnicas de revelar e 
esconder conteudos marcadoscom diferentes elementos HTML. 
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O capitulo 9 mostra a criagao dc cfcitos para cscondcr c revelar contcudos, 
dcmonstrando as tecnicas aplicadas a uma pagina contcndo um FAQ CSS e a 
ourra, contendo noticias. 

O capitulo 10 dedica-se aos efeitos em tabelas de apresenta^ao de dados, 
estudando tecnicas para destacar trechos delas que recebem o foco do usuario, 
bem como maneiras de apresentar tabelas extensas, com mecanismos de reve- 
lagao de trechos destas. 

O capitulo 11 aborda os formularios HTML, mostrando os efeitos fundamen¬ 
tal normalmente implementados no desenvolvimento deles, tais como cria^ao 
de mascaras e dicas de preenchimento dc campos. 

No capitulo 12, examinam-se os efeitos cm imagens, abordando nao somenre 
a manipulagao de imagens individualmente, mas tambcm a criagao dc galcrias 
de imagens. 

O capitulo 13 dedica-se a cria^ao dc efeitos cm mecanismos de navega^ao. 

No capitulo 14 examinamos o caso real de um menu tipo sanfona.Trata-se do 
menu do site www.maujor.com. Ensinamos nao so o script jQuery que faz funcionar 
o menu, mas tambem as tecnicas CSS da sua construgao. 


Para quern foi escrito este livro 

Este livro foi escrito para aquelas pessoas envolvidas na criagao de sites tanto na 
area de design quanto na de desenvolvimento e programayao, sem conhecimento 
das tecnicas jQuery ou com conhccimentos superficiais. 

O objetivo do livro c forncccr informa^ocs dctalhadas do funcionamento 
basico da biblioteca, estudando seus metodos c funcionalidadcs. Explicates tc- 
oricas cm linguagem correntc e clara, dispensando, sempre que possivel, o jargao 
tecnico avangado, sao acompanhadas de exemplos praticos explicados passo a 
passo e complementados por arquivo HTML para consulta. Nao se abordaram 
tecnicas avan^adas de emprego da biblioteca, constru^ao de plug-ins, intera^ao 
com AJAX nem outra linguagem ou biblioteca. 

Para tirar o maximo proveito dos ensinamentos contidos em cada capitulo 
e pre-requisito conhecer os fundamentos e a sintaxe da linguagem JavaScript, 
nao sendo necessario um conhecimento profundo dela, bem como razoavel 
conhecimento de folhas de estilo, em particular seletores CSS. 


Material com direitos autorais 



Introduqao 


17 


Os conccitos c o entendimento das tccnicas dc desenvolvimento com jQuery 
sao uma podcrosa ferramenta dc apoio na criagao dc sites mais intcrativos c agra- 
daveis, enriquecendo a experiencia do usuario. Profissionais da area de design, 
familiarizados com as tccnicas aqui dcscritas, contarao com uma valiosa fonte de 
inspiragao no planejamento das funcionalidades para incrementar suas criagoes. 

Os iniciantes, de posse das nogoes basicas da linguagem JavaScript, irao se 
beneficiar deste livro por iniciar seus estudos em uma fonte que aborda as mais 
modernas tecnicas de escrita do codigo, ensejando uma mudanga no rumo de 
seu estudo que ira reduzir a curva de aprendizado e acelerar tal processo. Nao 
se intimidem com conceitos ou terminologias que lhes sejam completamente 
dcsconhccidos nos primeiros capitulos. Com a scqucncia dc lcitura, as duvidas 
tcndcrao a dcsaparcccr naturalmentc. 


Converges tipograficas 

Com a finalidade dc dcstacar ditcrcntcs tipos dc informagao nestc livro, adota- 
ram-sc algumas convengocs tipograficas mostradas a seguir. 


Dica 

Tcxto contcndo uma dica sobre o assunto tratado: 



0 valor do atributo sre irtdica o caminho (diretorio) no qual se encontra gravado 
o arquivo da biblioteca. 


Alerta 

Tcxto contcndo uni lembrete sobre procedimcnto extra com relagao ao assunto 
tratado: 


]Query, ao contrario de JavaScript, nao requer loops para construir arrays quando 
busca elementos no DOM. 0 construtor $() armazena tudo que encontra, 
automaticamente, em um objeto array. 
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Terminologia 

Texto estabeleccndo a adoyao de grafia-padrao cm todo o livro para tcrmos ou 
frases com mais de uma terminologia, traduyao ou significado: 



Nos codigos desenvolvidos neste livro, adotou-se a sintaxe: S (). 


Chamada 

Uma chamada para uma scyao anterior na qual o assunto cm questao foi expli- 
cado com detalhes. 

Por exemplo: 

Esta funyao destina-se a servir de container para scripts jQuery que devam ser 
executados somente apos o carregamento do DOM. £i uma funyao que substitui 
o metodo readyO estudado em [Cl Sl.1.6.2]. Neste exemplo a chamada e para a 
seyao Ll.6.2 do capitulo 1. 

MarcaQoe scripts 

Nas marcayoes e scripts que exemplificam a teoria, transcreveram-se somente 
os trcchos que intercssam ao assunto tratado. Omitiram-se os trechos que nao 
dizem respeito ou nao sao relevantes para o entendimento do assunto, para nao 
ocupar espayo desnecessario no livro. 

Blocos de marcayao sao marcados com fontc monoespayada: 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

JC^btn-vermelha'J.clickCfunctionO { 

SCfcor'J.cssCcolor', ’ #FF0000 ’); 

}); 

}); 

</script> 

Trechos de marcayao que merecem destaque sao marcados cm negrito: 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

S(document).ready(function() { 
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$('#btn-vermelha').click(function() { 

$('#cor').css(’color',* #FFOOOO'); 

}); 

}); 

</script> 

Para explicar passo a passo cada linha de uin script, este e apresentado com 
suas linhas numeradas e, a seguir, os comentarios sao referenciados ao numero 
da linha comentada: 

1 . 

2. $('<h4 class=' , legenda"></h4> , ).insertAfter( , legend'); 

3. var textoLegenda = SClegend'J.removeO.textO; 

4. S('.1egenda').append(textoLegenda); 

5. S('fieldset').addClass(’fieldset'); 

6 . }); 

Codigo comentado: 

Linha Descriqao 

Linha 2 Insert* logo apos o elemento legend urn elemento h4 com a classe 
1 egenda e vazio. 

Linha 3 Armazena o texto do elemento legend em uma variavel denominada 
textoLegenda e remove o elemento do DOM. 

Linha 4 Insert* dentro do elemento h4 criado anteriormente o texto da legen- 
da. 

Linha 5 Define a classe fiel dset para o elemento fieldset, para fins dc cstili- 
za^ao. 

Cotligos, marcaijoes e sititaxe CSS contidos em textos sao marcados com fonte 
monoespa^ada. 

A fiingao jQuery.noConflictO permite, entre outras funcionalidades, criar um 
pseudonimo personalizado para desenvolvimento. 

Arquivos para download 

Os scripts mostrados no livro estao disponiveis para download e/ou consulta 
on-line no site do livro, cm http://www. livrojquery.com.br. Os documentos estao 
separados cm pastas por capitulos c foram nomeados com sintaxc propria, con- 
forme o exemplo a seguir: 

arquivo-2.1d.html 
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Estc c um arquivo que mostra um script contido no primciro item do segundo 
capitulo (2.1) e e o quarto script dcsse item (lctra d no final do nome do arquivo). 

Adicionalmente, ao final do script, ha uma indicayao do arquivo no qual foi 
inserido conforme conven^ao mostrada no exemplo a seguir: 


<script type="text/javascript" src=". ./jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

$(function(S) { 

$('div, p').css('background', 'green'); 

}); 

</script> 

</head> 

<body> 

<div>DIV</div> 

<p>Paragrafo</p> 

<div>DIV</div> 

</body> 

</html> 



[arquivo-2.1d.html] <= Indica^ao do arquivo que demonstra o funcionamento do script no 
site do livro.Trata-se do quarto arquivo (letra d) do item 2.1 no segundo capitulo. 


Destaques em geral 

Palavras ou termos cujo significado deva scr dcstacado sao grafados cm italico. 
Por exemplo: 

jQuery destina-sc a adicionar intcratividade e dinamismo incrementando de 
forma progressiva e ndo obstrutiva a usabilidade, a acessibilidade e o design. 

Variaveis 

Valores variaveis em codigos sao grafados em italico. 

Por exemplo: 

jQuery {expressao, [contexto]) 
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Site do livro 

O site de suportc a estc livro esta localizado em http://www. livrojquery.cwn.br. 

No site, inclufram-se as facilidades relacionadas a seguir: 

■ Arquivo de codigos: os codigos dos exemplos mostrados no livro estao dispo- 
m'veis tanto para consulta on-line como para download. 

■ Errata: efetuou-se urn exaustivo trabalho de revisao tipografica. Contudo, 
a pratica mostra que nenhum livro esta isento de erros - e com cste nao 
ha de ser diferente. Uma pagina do site dcdicada a errata esta dispomvcl 
para consulta. 

■ Feedback: incentiva-se vivamente os leitores a emitiropiniao sobre qualquer 
aspecto do livro. Serao de grande valia in formates sobre qualquer erro 
detectado para aperfei^oar futuras edigoes e atualizar a errata. Voce pode se 
comunicar com a editora pelo e-mail novatec@novatec.com.br ou diretamente 
com o autor pelo e-mail maujorcss@maujor.com. 
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Parte I 

Fundamentos teoricos da biblioteca jQuery 


A primeira parte deste livro compreende os capi'tulos de 1 a 7 e tem por objerivo 
apresentar a biblioteca, examinar sua sintaxe geral e estudar o emprego e fina- 
lidade dos metodos, propriedadcs c diferentcs funcionalidades dispomveis na 
biblioteca JQuery. 
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CAPITULO 1 

0 que e jQuery? 


Neste capitulo, sera apresentada a bibliotcca jQuery, relatando-sc suas origens, 
finalidades e desrina^ao. Sera feito um breve rclato historico de sua evolu^ao, 
examinando as motivates que resultaram cm sua cria^ao, c serao dcscritas 
algumas de suas possibilidades, dando uma ideia do seu potencial e mostrando 
a forga e poder da programa^ao JavaScript com o uso da bibliotcca jQuery. 


1.1 Defini^oes e conceitos 

1.1.1 0 que e jQuery? 

jQuery e uma biblioteca JavaScript criada porjohn Rcsigedisponibilizada como 
software livre e aberto, ou seja, de emprego e uso regido segundo liccn^a confor- 
me as regras estabelecidas pelo MIT (Massachusetts Institute of Technology) e 
peloGPL(GNU General Public License). Isto, resumidamente,significa que voce 
pode usar a biblioteca gratuitamente tamo para desenvolver projetos pessoais 
como comerciais. Para maiores detalhes sobre esses tipos de licenya, consulte os 
seguintes endere^os na internet: 

■ http://pt.wikipedia.org/wiki/Mit_license 

■ http://pt.wikipedia.org/wiki/GNU_General_Public_License 

John Resig, no prefacio do livro jQuery in Action , diz o seguinte: 


“O foco principal da bibliotcca jQuery e a simplicidade. Por que submeter 
os dcscnvolvedorcs ao martirio de cscrcvcr longos c complcxos codigos 
para criar simples efeitos?”. 
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Sem diivida, clc estava cm um momcnto de rara inspira^ao quando assim 
escreveu, pois soube rcsumir muito bem jQuery. £ uma maneira simples e facil 
de escrever JavaScript colocada ao alcance nao so de programadores experien¬ 
ces, mas tambem de designers e desenvolvedores com poueo conhecimento de 
programa^ao. 

E o que torna o estudo e entendimento dos conceitos basicos de jQuery mais 
fascinante ainda e o fato de que voce nao precisa ser um profundo conhecedor 
de JavaScript, por mais estranho que isso possa parecer, pois se trata de uma 
biblioteca criada para ser usada com base nessa programa^ao. 

Simplicidade e a palavra-chave que resume e norteia o desenvolvimento com 
jQuery. Linhas e mais linhas de programagao JavaScript escritas para obter um 
simples efeito cm um objeto sao substituidas por apenas algumas, escritas com 
sintaxe jQuery. Intrincados e as vezes confusos codigos JavaScript dcstinados a 
selecionar um determinado elemento HTML componcntc da arvore do docu- 
mento sao substituidos por um simples metodo jQuery. Voce mesmo, ao longo 
da leirura destc livro, ira constatar como jQuery consegue a proeza de criar 
extraordinarios efeitos com uma simplicidade impression ante, colocando o de¬ 
senvolvimento de scripts a seu alcance e dispor imediatos, sem exigir profundos 
conhecimentos de programa^ao. 

7.7.7.7 Historico 

No dia 22 de agosto de 2005, John Resig, cuja foto e mostrada na figura 1.1, 
um dcsenvolvedor americano profundo conhecedor de JavaScript, que atua na 
Corpora^ao Mozilla e e autor do livro Pro JavaScript Techniques , escreveu em 
seu blog um artigo relatando sua frustra^ao com a maneira verbosa de se escrever 
JavaScript para obter os resultados pretendidos. 



Figura 1.1 John Resig, o criador da jQuery. 
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Ncsse artigo, publicou alguns exemplos no quais propunha o uso dc selctores 
CSS com o objctivo de simplificar c dar maior versatilidade ao codigo. Escreveu, 
entao, que essa, ainda, nao era a forma definitiva do que tinha em mente, mas 
iria aperfei^oar e restar suas propostas. O nome ainda nao existia, mas nessa 
ocasiao foi lambada a ideia que traria como resultado a biblioteca jQuery. 

Aproximadamente cinco meses apos a publica^ao do artigo em seu blogjohn 
Resig apresentou publicamente os resultados de seus estudos em uma palestra 
intitulada “jQuery, a nova onda para JavaScript” proferida no BarCampNYC 
- Wrap Up, no dia 14 de janeiro de 2006. 

O ano de 2006 marcou a cria^ao do primeiro plug-in para a biblioteca, o lan- 
gamento de uma versao nao obstrutiva de LightBox usando a biblioteca jQuery 
Nesse ano, ocorreram, ainda, o lan^amento das versoes 1.0, 1.0.1, 1.0.2, 1.0.3 
e 1.04, da versao XML da biblioteca e o primeiro contcste publico de cria^ao 
com jQuery 

Em 2007, lan^aram-se as versoes 1.1, 1.1.1, 1.1.2, 1.13a, 1.13, 1.13.1, 1.1.4, 

1.2 e 1.2.1. No dia 11 de margo ocorrcu o primeiro encontro jQuery 

Em 2008, ate a data em que escrevi este livro, foram lan^adas as versoes 1.12, 
1.23,1.2.4,1.15 e 1.2.6. 

1.1.2 Para que serve jQuery? 

jQuery desrina-se a adicionar interatividade e dinamismo as paginas web, pro- 
porcionando ao desenvolvedor funcionalidades necessarias a criagao de scripts 
que visem a incrementar, de forma progressiva e nao obstrutiva, a usabilidade, 
a acessibilidade e o design, enriquecendo a cxperiencia do usuario. 

Use jQuery cm sua pagina para: 

■ adicionar efeitos visuais c animates; 

■ acessar e manipular o DOM; 

■ buscar informa^oes no servidor sem necessidade de recarregar a pagina 
(fora do escopo deste livro); 

■ prover interatividade; 

■ alterar conteudos; 

■ modificar apresentagao e estiliza^ao; 
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■ simplificar tarefas especfficas dc JavaScript; 

■ realizar outras tarefas relacionadas as descritas. 


1.1.3 jQuery em conformidade com os Padroes Web 

jQuery foi criada com a prcocupagao de scr uma biblioteca cm conformidade 
com os Padroes Web, ou seja, compauvel com qualquer sistcma operacional e 
navegador, alcm de oferccer suporte total para as CSS 3. Sim, e isso mcsmo, voce 
pode usar todos os poderosos seletores previstos nas CSS 3 sem se preocupar se 
este ou aquele navegador suporta o seletor para as CSS. Esclarecendo: a sintaxe 
do seletor segue a sintaxe prevista nas CSS 3, mas quern usa os seletores e a bi¬ 
blioteca, com a finalidade de selecionar elementos no DOM e nao estilizar. 

Evidentemente, isso nao significa que todo codigo escrito com uso de jQuery 
resulta em um documento valido segundo os Padroes Web. A biblioteca foi cria¬ 
da e cstii dc acordo com as dirctrizcs do W3C, mas cabe a voce, dcscnvolvedor, 
escrcvcr scus scripts cm conformidade. 

Se voce pretende escrever em conformidade com os Padroes Web, adote como 
regra basics de dcsenvolvimento de scripts a filosofia de que jQuery se destina 
a adicionar interatividade c dinamismo, incrementando dc forma progressiva 
e nao obstrutiva a usabilidadc, a acessibilidade c o design com o proposito de 
enriquecer a experiencia do usuario. 

Leia a analogia a seguir. 

Por nao dispor de verba suficiente, Fulano compra um carro, o modelo mais 
simples da linha, c alguns meses depois, tendo sobrado uma verba, resolve in- 
vestir no carro equipando-o com alguns acessorios, como insulfilm, som, alarme, 
protetor solar e alguns outros itens, mudando o aspccto inicial do carro c fazen- 
do-o pareccr um modelo intermediario da linha. Passado algum tempo c tendo 
economizado uma boa quantia, Fulano resolve melhorar o carro instalando 
calotas de ago escovado, GPS, TV digital, frigobar, MP3 e outros acessorios mais 
sofisticados, conscguindo um visual de carro top de linha. 

Fulano e o desenvolvedor, o carro mais simples e a pagina web sem scripts, o 
carro top de linha e a pagina web incrementada com jQuery, as duas etapas de 
colocagao de acessorios representam o incremento progressivo e o fato de Fulano 
(e ninguem em sa consciencia) n2o ter mandado retirar o motor do carro para 
colocar um jarro de flores representa o incremento nao obstrutivo. 
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O carro top dc linha dc Fulano continuara scndo urn carro com todas as suas 
funcionalidades, cumprindo rigorosamcntc todas para as quais foi projctado 
quando saiu da fabrica, mesmo que dele sejam retirados todos os acessorios. 
Com scripts em geral, e jQuery no nosso caso, acontece a mesma situayao. Seu 
documento estara em conformidade com os Padroes Web se continuar usavel e 
funcional caso os scripts parem de funcionar. Urn belfssimo menu de navegayao, 
com efeitos ultrassofisticados, nao valera nada se nao for acessfvel sem o script 
que o faz funcionar. Pode tornar-se esteticamente horroroso, mas deve cumprir 
sua finalidade quando nao sustentado pelo script. 

Algumas tecnicas para preservar a acessibilidade aos conteudos incrementa- 
dos com jQuery sao basicas c scrao abordadas cm momcnto oportuno. Outras 
situayocs de prescrvayao dc acessibilidade porcstarcm inscridas no contcxto de 
um desenvolvimento parricular nao tern soluyao em uma tccnica preestabelecida 
e dependem da criatividade c capacidade dc o desenvolvedor resolver situates 
especificas. 



Sempre que for o caso, os exemplos deste livro serao desenvolvidos de forma 
nao obstrutiva, contudo, como dito anteriormente, quando a obstru?ao depender 
de um contexto particular, sera entendido que sua avaliayaoe soluyao dependem 
de cada caso. 


1.1.4 Caracteristicas da biblioteca jQuery 

jQuery e uma biblioteca JavaScript que possui as seguintes caracteristicas: 

■ utiliza seletores CSS para localizar elementos componentes da estrutura 
de marcayao HTML da pagina; 

■ possui arquitetura compatfvel com instalayao de plug-ins e extensoes em 
geral; 

■ e indiferente as inconsistencias de renderizagao entre navegadores; 

■ e capaz dc intcra^ao impli'cita, isto e, nao ha ncccssidade dc constrmjao dc 
loops para localiza^ao de elementos no documento; 

■ admite programayao encadeada, ou seja, cada metodo retorna um objeto. 

■ e extensive!, pois admite criayao e inseryao de novas funcionalidades na 
biblioteca existente. 




30 


jQuery ■ A Biblioteca do Programador JavaScript 


Nao sc prcocupc sc algumas das caractensticas dcscritas socm scm scnrido 
para voce. Com o prosseguimento da lcitura, os conccitos ficarao claros c com- 
prccnsiveis. O fato e que tais caractcri'sticas possibilitaram a cria^ao de uma 
biblioteca bastante compacta e, ao mesmo tempo, poderosa o bastanre para 
oferecer funcionalidades que tornam o processo de desenvolvimento igualmente 
compacto e extremamente simples. 

Por ser distribuida como software livre, jQuery tern o apoio e o envolvimento 
de uma consideravel comunidade. Desenvolvedores do mundo todo tern contri- 
buido em larga escala com novas ideias, scripts, plug-ins, extensoes e toda sorte 
de implementa<*oes, com a finalidade de incrementar nao so a biblioteca, mas 
tambem as tccnicas de desenvolvimento jQuery. 


1.1.5 Como instalar jQuery 

A biblioteca jQuery nada mais e que um arquivo JavaScript (arquivo do tipo 
texto puro gravado com a extensao . js, como meu_arquivo. js) que devera ser 
linkado a pagina web onde serao aplicados efeitos, ou seja, a pagina web onde 
serao aplicados os efeitos devera “chamar” biblioteca. £ somente isso. Voce nao 
precisara instalar nada. Basta fazer o download gratuito do arquivo c "chama-lo" 
na(s) pagina(s). 

Uma pagina ou documento “chama” um arquivo de script fazendo uso do ele- 
mento script e seus atributos type e sre colocados na se^ao head do documento. 

A versao mais recente da biblioteca esta no arquivo jquery-l.2.6.js e adiante 
voce vera como e onde fazer o download dele. £ muito provavel que na ocasiao em 
que voce estiver lendo este topico ja exista uma versao mais recente e e esta que 
voce devera baixar para seus estudos e desenvolvimentos. Entiio, um documento 
que use a biblioteca devera ter marcado, em sua so*'no head, o seguinte elemento 
script, entre outros elementos proprios de cada caso: 


<head> 

<script type="text/javascript" srcs’Vcaminho/jquery-l^.e.js"x/script> <!-- esta 
linha chama a biblioteca jQuery --> 

</head> 



0 valor do atributo sre indica o caminho (diretdrio) no qual se encontra gravado 
o arquivo da biblioteca. 
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A partir daqui c impcrativo rcr gravado cm scu HD a ultima vcrsao da bi- 
bliotcca para poder acompanhar os exercicios dcstc livro c fazcr funcionar scus 
experimemos com jQuery, que, tenho certeza, irao fascina-lo. 

E litre no site oficial http://jquery.com, va para a pagina de download con forme 
mostrado na figura 1.2 e faya o download da ultima vcrsao da biblioteca jQuery. 
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Figura 1.2 - Site oficial da biblioteca jQuery. 

Observe, na area de download em destaque na figura 1.2, que existent di- 
ferentes tipos de apresentayao da biblioteca para download c uni link para um 
documcnto hospedado no proprio site, contendo um relatorio das modificayoes 
introduzidas na atual vcrsao. 

A apresentayao denominada “Uncompressed”- jquery-1.2.6. js - destina-se ao 
uso em testes, estudos e desenvolvimento da biblioteca. Trata-se de um arquivo 
no qual o texto do script foi escrito com espayo entre cada linha de codigo, am- 
plamente comentado, o que facilita a leitura, analise e entendimento do codigo 
contido no arquivo. Esta e a apresentayao recomendada para voce baixar e fazer 
uso nos estudos c acompanhamento dos experi men tos descnvolvidos ncste livro. 
O tamanho desse arquivo e de 97,8KB. 
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A aprcscntagao denominada “Minified”- jquery-1.2.6.rain. js -difcrc da anterior 
por terem sido removidos todos os comentarios c espagamentos entre linhas c 
declara^oes, rornando o codigo dificil de ler para humanos e mais compacto, pois 
se transforma em uma sequencia corrida de codigo, sem quebras de linha. Esta 
e a apresenta^ao recomendada para ser usada no desenvolvimento de sites. A 
vantagem sobre a versao anterior e que se trata do mesmo arquivo com tamanho 
reduzido para 54.4KB. 

Finalmente,a apresenta^aodenominada “Packed”-jquery-l.2.6.pack.js-e uma 
versao obtida por processo de compressao JavaScript da biblioteca, resultando 
em um arquivo com tamanho igual a 303KB. Essa versao, por sercodificada, nao 
c legivcl para humanos. 

Embora com tamano menor que o da versao “Minified” o tempo de carrega- 
mento dcsta versao acaba sendo praticamente igual ao daquela versao, pois ha 
que sc computar o tempo de descompressao quando o usuario rcccbc a pagina. 
Esta versao tern a desvantagem em rela^ao a anterior de nao ir para o cache, 
tendo que ser carregada novamentc toda vez que o usuario volta ao site. Outra 
desvantagem que desaconselha seu uso e o fato de que o processo de descom¬ 
pressao pode, eventualmente, ser imperfeito, introduzindo bugs nao existentes 
na versao sem compressao ou na compacta. A nao ser que voce tenha uma boa 
justificativa para usa-la, nao use-a. 


A partir daqui, para testar os exemplos do livro, supoe-se que voc§ baixou e gravou 
em seu HD a apresentapao ‘Uncompressed’' - jquery-1.2.6. js - da biblioteca, 
para ser chamada pelas paginas de estudos conforme explicado anteriormente. 


1.1.6 jQuery na pratica 

Para que um script consiga imprimir dinamismo, alterar comportamentos ou 
apresentagao, no todo ou cm partes de uma pagina web, precisa de um metodo de 
accsso a arvore do documcnto com a finalidade de cncontrar o elemento HTML 
no qual sera vinculado o comportamcnto. 

Para cxcmplificar, imagine uma pagina web na qual cxistc um botao que, ao 
ser clicado, muda a cor de um cabcgalho, de verde para vermelha. 



Nos exemplos constantes dos arquivos disponiveis para consulta ou download, 
voc6 ir£ verificar o funcionamento dos scripts, interagindo com a pagina que 
contem o exemplo, clicando um botao ou agindo com o mouse. Para repetir o 
funcionamento do script, recarregue a pagina (em ambiente Windows tecle F5). 
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► Solu^ao com JavaScript in-line: 

<head> 

<style type="text/css" media="all"> 

hi {color:#090;} /* cor verde para o cabe<;a1ho V 
</style> 

</head> 

<body> 

<hl id="cor">Cabe<;a1ho muda de cor</hl> 

<button type="button" onclick * "docunent.getElementByld('cor').style.color='#FF0000';"> 
Vermel ha 
</button> 



[arquivo-1.1.6a.html] 


A tecnica usada nessa solu^ao consiste cm inserir script dentro de marcagao 
HTML (in-line), sendo uma pratica ultrapassada e, infelizmente, ainda 
amplamente empregada por muitos dcsenvolvedorcs. Essa solu^ao contra- 
ria um princfpio fundamental dos Padroes Web que preconiza separa^ao 
total entre estrutura de marca^ao com HTML, apresenta$ao com CSS e 
comportamento com scripts. Cada codigo no seu arquivo correspondente 
e separado. Evite usaressa solu^ao. 


► Solu^ao com fun^ao JavaScript: 


<head> 

<style type="text/css M media="all"> 
hi {color:#090;} 

</style> 

<script type=“text/javascript"> 
function i»udaCor() { 

document.getElementById(’cor’).style.col or = '#FFOOOO'; 

} 

</script> 

</head> 

<body> 

<hl id="cor">Cabe<;alho muda de cor</hl> 

<button type="button'' onclick = "mudaCor();"> 

Vermel ha 
</button> 



[arquivo-L1.6b.html] 
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A tccnica usada ncssa solu^ao c uma melhoria da solu^ao anterior e consiste 
em definir uma fun<;ao dentro da se^ao head do documento, que pode ser 
chamada per varios hordes dentro dc um mesrno documento, permitindo 
ampliar o uso do script para alcm de um botao. Uma variante dessa solugao 
consiste em colocar a fun^ao em um arquivo externo e linkar o arquivo ao 
documento. Isso permite usar a fun^ao em varios hordes dentro de varios 
documentos. Essa soluyao continua misturando estrutura com compor- 
tamento e, tal como a anterior, deve ser evitada. 

► Solu^ao com JavaScript fora da marca$ao: 


<head> 

<sty1e type="text/css” media="all"> 
hi {color:#090;} 

</style> 

<script type="text/javascript"> 
window.onload = function() { 

document.getElementByldCbtn-vermelha'Tonclick = mudaCor; 

}; 


function isudaCor() { 

document.getElementByldCcor').style.col or = * #FFOOOO *; 

}; 

</script> 

</head> 

<body> 

<hl id="cor">Cabe<;alho muda de cor</hl> 

<button type="button" id="btn-vermelha">Vermelha</button> 



[arquivo-1.1.6c.html] 


Agora, sim! A marca^ao HTML esta isenta dc codigo JavaScript, pois se 
incorporou o script a sc^ao head do documento. Resta agora colocar o 
script em um arquivo externo separado e linkar para a(s) pagina(s). Essa 
e uma boa solu^ao sob o ponto de vista da separa^ao do comportamento, 
marcagao e estiliza^ao. 
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► Solu^ao com jQuery: 

Caso voce nada conheya de jQuery, nao se intimide com o script a seguir. 
Limite-se a observar com atenyao cada linha do codigo que seu conheci- 
mento dc JavaScript Ihe dara uma no^ao bem proxima de seu funciona- 
mento. Com o prosscguimento da leitura, voce entendera a finalidade de 
cada linha do script: 


<head> 

<style type="text/css M media=»"a11"> 
hi {color:#090;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

$(document).ready(function() { 

$('#btn-vernielha').click(function() { 

S('#cor').css('col or"," IFFOOOO ’ ); 

}); 

}); 

</script> 

</head> 

<body> 

<hl id="cor">Cabecalho muda de cor</hl> 

<button type="button" id="btn-verrnelha' , >Vernielha</button> 



[arquivo-1.1.6d.html] 


Ao contrario das solu^oes tradicionais com JavaScript, como as mos- 
tradas anteriormente, o uso da biblioteca jQuery nao permite misturar 
script com marca^ao HTML. Nao e previsto nem existe uma sintaxe para 
jQuery in-line. Voce e obrigado a inserir seu script incorporado na se^ao 
head do documento ou escreve-lo em um arquivo separado e linkar para 
os documentos onde serao utilizados. Como regra geral, adote as mesmas 
diretrizes que regem a vincula^ao de folhas de estilo, isto e, se seu script 
serve a mais de uma pagina, adote a solu^ao de linkar, senao, a solu^ao de 
incorporar na seyao head do documento. Mas lembre-se que mesmo para 
uso em uma so pagina, em scripts que demandem tempo de carregamcnto 
nao desprezivel, a solu^ao dc linkar e melhor, pois neste caso o script vai 
para o cache da maquina do usuario. 

Os quatro exemplos aqui apresentados tiveram por objetivo linico mostrar na 
pratica um efeito bem simples criado de tres maneiras diferentes com JavaScript 
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c a mancira jQuery. Ainda que scus conhecimentos basicos de JavaScript sejani 
limitados, nao sc intimidc, simplesmente consulte com atenyao os codigos c va em 
frente. Mas tanto voce quanto aqueles familiarizados com JavaScript nao deixem 
de abrircada uma das paginas contendo os scripts, constatarseu funcionamento 
e olhar no codigo-fonte da pagina. Os arquivos das paginas estao no site do livro, 
dispom'veis para consulta on-line e tambem para download. 



Toda pagina na qual se pretende fazer funcionar um script jQuery devera estar 
linkada para o arquivo da biblioteca baixado do site jQuery. 


1 . 1 . 6.1 fvenfO window, onload 

JavaScript e uma tecnica de programayao que funciona percorrendo e buscando 
seus alvos (elementos da marcayao) na arvore do documcnto ou no DOM, ou 
seja, um script so conscgue executar sua ayao sc todo o documcnto ja tiver sido 
carregado. Os elementos da marcayao de uma pagina so existem depois que a 
pagina e carregada, ou, mais prccisamcnte, vao cxistindo a medida que a pagina 
vai sendo carregada e na sequcncia em que aparecem na marcayao a partir da 
declarayao do doctype ate a tag de fechamento do elemento html. 

Na pratica, isso significa que se voce inserir na marcayao de uma pagina um 
script que se refira a um elemento hi, por exemplo, em local acima daquele no 
qual foi escrito o elemento hi, seu script nao ira funcionar, porque sera carregado 
na pagina antes do carregamento do elemento hi. 

Observe, a seguir, a transcriyao do terceiro exemplo mostrado no item 1.1.6 
no qual todo JavaScript foi retirado da marca$ao e passado para a seyao head do 
documento. 

<head> 

<style type="text/css" media="all"> 

hi {color:#090;} 

</sty1e> 

<script type="text/javascript"> 

window.onload = functionO { 

document. getElementByldCbtn-vermel ha').ondick = mudaCor; 

}; 

function mudaCor() { 

document.getElementByld('cor').style.color = '#FF0000'; 

}; 
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</script> 

</head> 

<body> 

<hl id="cor">Cabe<;alho muda de cor</hl> 

<button type="button" id="btn-vermelha">Vermelha</button> 


Vamos alterar ligeiramente o script anterior reescrevendo-o conforme mos- 
trado a seguir. 


<head> 

<style type="text/css M media="all"> 
hi {color:#090;} 

</style> 

<script type="text/javasc ri pt"> 

document.getElementById('btn-vennelha').onclick = mudaCor; 
function mudaCor() { 

document.getElementByld('cor').style.color = '#FFOOOO'; 

} 

</script> 

</head> 

<body> 

<hl id="cor">Cabe<;alho muda de cor</hl> 

<button type="button" id=' , btn-vermelha">Vermelha</button> 



[arquivo-1.1.6.1a.html] 


Observe que o que se fez foi retirar do script a declara^ao que diz: 

window.onload = function() { 

...faga isso... 

} 


Mesmo para quem pouco conhece de JavaScript, a declara^ao e autoexplicativa, 
pois wi ndow.onload, traduzindo para o portugues,significa: dcpois queodocumcnto 
for carrcgado, fa<;a isso. Fa^a isso c a fun^ao mudaCorC). 

Agora,com a retiradaquesefez,oscript (...faga isso. ..) naoesperara a pagina 
ser carregada e, consequentemente, nao funcionara e o botao nao trocara a cor do 
cabc\alho, conforme se pode constatar no arquivo existente no site do livro. Isso 
ocorre pela razao explicada anteriormente: o script foi escrito antes dos elementos 
hi e button com seus ids cor e btn-vermelha constantes do script, ou seja, quando o 
script e carregado, ainda nao existent os ids de que precisa para funcionar. 
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Se rirar o script da segao head do documento c posiciona-lo dcpois dos ele- 
mcntos cnvolvidos, funcionara normalmcntc. Faga assim: 


<head> 

<style type="text/css M media="aH"> 
hi {color:#090;} 

</style> 

</head> 

<body> 

<hl id="cor ,, >Cabe<;alho muda de cor</hl> 

<button type="button" id="btn-vermelha">Vernielha</button> 
<script type="text/javascript"> 

document. getElei»entById('btn-verniel ha').onclick = mudaCor; 
function i*udaCor() { 

document.getElementByldCcor').style.col or = ’#FFOOOO'; 

} 

</script> 



[arquivo-1.1.6.1b.html] 


E tudo voltara a funcionar. Veja nos arquivos existentcs no site do livro as 
paginas mostrando as duas situagoes descritas anteriormente. 


Condusao 

Fara possibilitar a retirada de scus scripts da marcagao HTML, a linguagem 
JavaScript dispoe da declaragao window.onload que atua como uma especie de aviso 
para que a fungao entre em agao (ou comece a “rodar”) somente apos a pagina 
ter sido completamente carregada. 

Existent outros metodosque cumprem a mesma finalidade e oferecem outras 
f uncionalidades, como permitir declarar varias fungoes, mas nao e o escopo deste 
livro aprofundar a linguagem JavaScript. 


1.1.6.2 Metodo readyO 

Tal como vimos para JavaScript, jQuery, que se baseia nessa linguagem, tam- 
bem precisa que seus scripts conhegam a arvore do documento para poder 
funcionar. 
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Na sintaxc jQuery, o equivalente ao window.onload e rodas as suas variances c 
mostrado a seguir. 

$(document).ready(function() { 

...fa«;a isso... 

}); 

Essa notayao c conhccida como sintaxe formal para escrita do metodo readyO, 
que significa o seguinte: “quando o documento estiver pronto, faya isso”. Faya isso 
c o script a executar. 

Voce podc omitir o parametro document passado para a funyao jQuery cons- 
rrutora S() e cscrever com a seguinre sinraxe: 

$().ready(function() { 

...fa<;a isso... 

}); 

O metodo jQuery read() oferece duas vantagens sobre seu equivalente 
JavaScript: 

■ O script esra pronto para funcionar tao logo a arvorc do documento tenha 
sido carregada. Nao e necessario que todos os componentes da pagina, tais 
como imagens, folhas dc cstilo, animaydes e nu'dias cm gcral, tenham sido 
carregados. Basta que a estrutura de marcayao da pagina esteja disponivel 
e o script ja podera funcionar. 

■ Nao ha variayoes funcionais para o metodo e pelo fato de jQuery nao ad- 
mitir mistura de script com marcayao, utiliza-se a sintaxe mostrada para 
servir de container aos scripts. 

Existe uma sintaxe alternativa a sintaxe formal mostrada anteriormente para 
o metodo readyO, chamada de sintaxe abreviacla, que e a seguinte: 

S(function() { 

...fa<;a isso... 

}); 



Nos codigos desenvoh/idos neste livro, sera adotada a sintaxe formal, pois se 
considera que. apesar de ser mais extensa, oferece melhor legibilidade, sendo 
em consequSncia mais ttdl de ser visualizada. Em seus desenvolvimentos 
reais, sinta-se a vontade para usar a sintaxe abreviada que, certamente, reduz 
o trabalho de digitayao. 
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1.1.7 Fundamentos jQuery 

A finalidade do uso de jQuery e controlar o comportamento de toda ou partes 
de uma pagina web. Sabe-se que uma pagina web nada mais e do que marcagao 
HTML. Entao, e licito concluir que o principio dc funcionamento de jQuery 
fundamcnta-se cm sua capacidadc de encontrar os elementos HTML que cons- 
tiruem a pagina c a estcs anexar seus mctodos. 


1.1.7.1 ConstrutorjQuery 

Inicialmente, vcja o cncarrcgado de encontrar elementos HTML cm um docu- 
mento: 

$0 

Tecnicamente, rrata-se do que se denomina, cm linguagem de programagao, 
de construtor. O construtor S() ou,ainda,a fungao construtora SO estara presente 
em todos os scripts que voce escrever, portanto decore desde ja sua sintaxe: um 
sinal de cifrao seguido de parenteses (o que, convenha, nao e tiio complicado de 
decorar). 

Outras bibliotecas JavaScript tambem usam a fungao S(). Isso pode causar 
conflitos e mau funcionamento de scripts quando se usa mais de uma biblioteca 
no mcsmo documento. Nesses casos, existem mctodos para evitar conflitos e um 
deles c usar a sintaxe alternadva mostrada a seguir. Outros mctodos para evitar 
conflitos serao aprcscntados posreriormcnte. 

jQueryO 



Nos codigos desenvolvidos neste livro, sera adotada a sintaxe: $(). 


Simplicidade e a filosofia que orienta o desenvolvimento de jQuery desde 
sua cria^ao. Observe os codigos a seguir. Voce, mesmo nao conhecendo nada 
de jQuery, seria capaz de concluir a finalidade dc cada uma das linhas do codigo 
a seguir? 

S('hl'); 

S('p’); 

S('span’); 

$(' tab!e *); 
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Bern simples, nao c mesmo? Voce csta instruindo seu construtor a encontrar 
todos os elementos hi, p, span c table rcspectivamente. 



jQuery, ao contreirio de JavaScript, nao requer loops para construir arrays quando 
busca elementos no documento. 0 construtor $() armazena automaticamente 
em um objeto array tudo que encontra. 


Encontrar todos os elementos de um determinado tipo nao parece muito util. 
Seria bem melhor se voce pudesse encontrar uma ocorrencia especffica de um 
elemento. 

For exemplo: quero encontrar o terceiro paragrafo do documento. Bem, neste 
caso, uma solugao seria marcar o terceiro paragrafo com o atributo id para iden- 
tificar sua ocorrencia: 

<p id="xpto">Texto do terceiro paragrafo</p> 

e escrever o construtor assim: 

$C#xpto’) 

Voce conhece CSS? Ainda nao? £ essencial come^ar a aprender hoje mesmo, 
sob pena de ficar ultrapassado nas tecnicas de desenvolvimento web. jQuery 
nao e excegao a regra e faz amplo emprego de seletores CSS. Como se disse 
anteriormente, adota os poderosos seletores CSS 3 para localizar elementos no 
documento. E nao sc preocupc, pois o uso de seletores CSS cm jQuery em nada 
se relaciona com suporte pelos navegadores. Use e abuse desses seletores que seus 
scripts funcionarao em qualquer navegador. 

Observe o codigo a seguir: 

S('body p:nth-chi 1d(3)') 

Aqui o construtor esta usando um seletor CSS 3 que tern como alvo o ter¬ 
ceiro paragrafo descendente do elemento body. Trata-se de uma busca simples, 
sem necessidade de atribuir um identificador ao terceiro paragrafo como se fez 
anteriormente. 

A verdade e que jQuery usa amplamente seletores CSS e, assim sendo, e 
pre-requisito para bem desenvolver jQuery o conhecimento profundo desses 
seletores. No apendice A, voce encontra um guia de consulta aos seletores que 
ira ajuda-lo a acompanhar os exemplos deste livro. 
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1.1.7.2 Encadeamento jQuery 

Um conceito importante da biblioteca jQuery e o encadeamento. Observe a linha 
de codigo a seguir: 

SCdiv'J.childrenCp'J.fadeOutO.addClassCxpto') 

Nao se preocupe se o codigo parecer confuso ou ininteligivel, pois logo voce 
estara entendendo-o. O codigo diz o seguinte: 

“Construtor, encontrc todos os clcmentos paragrafos quc sejam filhos 
dos elementos div, nclcs aplique um cfcito de esmaccimcnto (fadeOut) c 
adicione a classe xpto”. 

Denomina-se encadeamento a caracteristica de se poder encadear diversos 
metodos em uma declaragao. Isso e possfvel porque se criou jQuery de modo a 
que cada metodo retorne um objeto pronto para receber outro metodo, que, por 
sua vez, retornara outro objeto, e assim por diante, permitindo ao desenvolvedor 
construir uma cadeia infinita de objetos e metodos. Hm JavaScript tradicional, 
nao existe encadeamento como o projetado para jQuery, o que obriga o uso de 
multiplas declaragoes para se conseguir um efeito que, em jQuery, se consegue 
com uma linha de codigo apenas. 

1.1.7.3 Fun<;des utilitarias 

Scrvir como inspctor c selecionador de componentes do DOM, conformc visto 
anteriormente, nao e a unica atribuigao da fungao S(). jQuery prcve um conjunto 
de fungoes chamadas utilitarias quc usa o sinal $ como um idcntificador tal qual 
qualquer outro idcntificador prcvisto cm JavaScript. A sintaxe para as fungoes 
utilitarias e mostrada no exemplo a seguir: 

$.browser; 

ou com a op^ao de uso do idcntificador jQuery: 

jQuery.browser 

O exemplo mostra uma fun^ao para identificaro tipo de navegador do usuario 
que equivale a fun^ao navigator.userAgent do JavaScript. 

t muito pouco provavel que voce use uma fun^ao utilitaria no desenvolvi- 
mento de scripts para tuncionar em uma pagina web. Elas tern sua utilidade 
no desenvolvimento de extensoes para a biblioteca jQuery, como a criagao de 
plug-ins. 
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1.1.7.4 Conflitos com outras bibliotecas 

Sem duvida, a invengao dc bibliotecas revigorou o uso dc JavaScript no desen- 
volvimento dc paginas web, pois alem de tornar o proccsso de criagao bem mais 
simples, fomeceu mecanismos que possibilitam criar codigos nao obstrutivos 
e, em consequencia, sem prejufzos para usabilidade e acessibilidade da pagina. 
jQuery nao detent exclusividade no campo das bibliotecas JavaScript, pelo con- 
trario, muitas bibliotecas surgiram nos liltimos tempos, entre elas: Prototype, 
MochiKit, MooTools, Yahoo User Interface (YUI) e DOMAssistant. 

O identificador S tambem nao e exclusividade de jQuery e outras bibliotecas 
fazent uso dele. Se um documento usa mais de unta biblioteca, e provavel que 
ocorrant conflitos com diferentes bibliotecas tentando interpretar um mesmo 
identificador e cstabelecendo-se unta cnormc confusao. 

O sinal $ e um pseudbninto c, no jargao recnico, diz-se “alias” para o iden¬ 
tificador da biblioteca. O identificador utilizado foi jQuery, assim, ao usar essa 
biblioteca, $ c o pseudonimo de jQuery e as duas sintaxes mostradas a seguir sao 
equivalentes: 

SO 

e 

jQueryO 

Usar jQueryO elimina o risco de conflitos, mas obriga o desenvolvedor a abrir 
mao de escrever com a forma abreviada do pseudonimo. 

Felizmentc, para evitar conflitos com outras bibliotecas, sent prcscindir dc 
unta forma abreviada, existe a fungao jQuery.noConflictO que permite, entre outras 
funcionalidades, criar um pseudonimo personalizado para desenvoIvimento.Tal 
fungao sera abordada no capitulo 2, em [C2 S2.1]. 
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CAPITULO 2 

Fun^des-padraoe 
seletores jQuery 


Na primeira parte deste capitulo, serao explicadas as funyoes-padrao, de em- 
prcgo mais comum, da biblioteca jQuery, examinando a sintaxe, aplica^ao e 
funcionamento de objetos, metodos e propriedades que constituem o coragao 
da biblioteca. Na sequencia, serao examinados os poderosos seletores jQuery, 
aprescntando-sc sua sintaxe e desenvolvendo-se exemplos dc aplica^ao. 


2.1 Fun$oes-padrao jQuery 

Os arquivos exemplo contcndo a demonstra^ao pratica das fundoes e seletores 
aprcscntados ncstc capitulo sc basciam na tccnica dc cstilizar o(s) elcmento(s)- 
alvo(s) de forma difcrenciada no momento cm que o script “roda” por ter sido 
acionado um disparador de eventos, em geral o clique em um botao. 

Para adicionar estilos em uma seleyao jQuery, pode-se usar duas sintaxes 
que serao estudadas com detalhes em [C4 S4.1], contudo veja a apresenta<jao 
da sintaxe mais simples que sera usada neste capitulo com o fim proposto no 
paragrafo anterior. 

A sintaxe geral para adicionar estilo ao elemento-alvo de um seletorjQuery 
e mostrada a seguir: 

seletorjQuery.css(' propriedade ’, ’ va lor ’) 

O paramctro propriedade e uma propriedade CSS c o paramctro valor, a quantificagao 
ou caracteristica da propriedade. Neste capitulo, serao usadas frequentemente as 
propriedades backgroud e color com os valores red (vermelho) e green (verde). 
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$(expressdo, [contexto ]) 

Esta e a principal fun^ao jQuery mencionada no capitulo 1, a qual aceita dois 
argumemos. Vcja-os a scguir. 

Argumento Descriqao 

expressao Um seletor CSS ou um dos seletores especfficos da biblioteca. 

contexto O contexto cm que sera teiia a procura do seletor. Omitindo esse 
argumento, o valor-padrao de procura sao os clementos do DOM 
no documento atual. Voce pode limitar a procura ao contexto de 
um elemento ou conjunto de elementos do DOM ou mesmo a um 
objeto jQuery. 

Exemplo: 

<head> 

<style type="text/css" media="all"> 

div {width:200px; height:lOOpx; border:lpx solid #000; margin:20px;> 

</sty1e> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

S(document).ready(function() { 

$('#diferente').css('background', 'red'); // sem uso do parametro contexto 

S('p', $('#container')).css('co'lor' l 'green');// com uso do parametro contexto 

}); 

</script> 

</head> 

<body> 

<divx/div> 

<div id="diferente"x/div> 

<divx/div> 

<div id=”container"> 

<p>Paragrafo dentro do div#container</p> 

</div> 

<p>Paragrafo fora do div#container</p> 



[arquivo-2.1a.html] 


Nesse script, verifica-se o uso do construtor $() sem o parametro contexto , 
quando se da a busca pelo elemento cujo id e diferente, busca esta em todo o 
documento, para estilizar sen fundo na cor vermelha. Na outra situagao, cons- 
tata-se o uso do parametro contexto igual a S('#container'), quando se da a busca 
pelos paragratos dentro do div#container, para estiliza-los na cor verde. Se omitisse 
o parametro contexto nesse segundo caso, todos os paragrafos no documento 
seriam estilizados na cor verde. 
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$(html) 

Esta fun^ao dcstina-se a criar marca^ao HTML. O valor do argumento passado 
e uma string contcndo marca^ao estrutural quc podc ser escrita manualmcnte 
em texto puro, usando um gerador de template, um plug-in ou AJAX. Neste 
livro, voce vera a gera^ao via texto puro escrito manualmente. Lembre-se de 
que criar marca^ao via JavaScript torna o conteudo completamente inacessi'vel 
a tecnologias assistivas. Use essa fungao consciente dessa limita^ao, lembrando 
que scripts jQuery destinam-se a um incremento progressive do documento, 
portanto nao cric marca^ao cm dcsacordo com esse objetivo. Ha limita^oes na 
cria^ao de controles do tipo input para formularios com essa fun^ao, assim evite 
cria-los com o uso de script. Barras, quando presentes na string do argumento, 
devem scr cscapadas. 

Exemplo: 

<head> 

<script type="text/javascript" src«”../jquery-1.2.6.js”x/script> 

<script type="text/javascript”> 

$(document).ready(function() { 

S('<p>Eu sou um parigrafo criado com jQuery.</p> 'j.prependToCbody'); 

}); 

</script> 

</head> 

<body> 

</body> 

</html> 

♦1 (arquivo-2.1b.html] 

Estc script cria a marca^ao para um paragrafo c scu rcspcctivo texto c usando o 
metodo prependToO , quc sera apresentado adiante, escrevc a marca^ao no elemento 
body. Se voce visualizar o codigo-fonte da pagina, a marcagao do paragrafo nao 
estara la e e isso que um leitor de tela encontra, ou seja, absolutamentc nada. 

$(elementos) 

Esta fungao destina-sc a procurar elementos HTML no DOM. Aceita tambem 
documentos XMLc objetos window, ainda quc nao sejam componentes do DOM, 
como argumentos. 
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Exemplo: 


<head> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

$(document).ready(function() { 

SC'div, p').css('background', 'green'); 

}); 

</script> 

</head> 

<body> 

<div>DIV</div> 

<p>Paragrafo</p> 

<div>DIV</div> 

</body> 

</htntl> 



[arquivo-2.1c.html] 


$(callback) 

Esta fungao destina-se a scrvir dc container para scripts jQuery quc devam ser 
cxecutados somente apos o carregamcnto do DOM. £ uma fungao idcntica ao 
metodo readyO estudado cm [Cl S 11.6.2]. Tecnicamente, pode-se dizer que sc 
trata dc uma forma abreviada dc escrever S(document).readyO. 

Observe, no cxcmplo a seguir, quc se trata do mesmo exemplo mostrado no 
item anterior, no qual se substituiu o metodo readyO por esta funyao. 

Exemplo: 


<head> 

<script type="text/javascript" src*"../jquery-1.2.6.js"></script> 
<script type="text/javascript"> 

S(function($) { 

$('div, p').css('background', 'green'); 

}); 

</script> 

</head> 

<body> 

<div>DIV</div> 

<p>Paragrafo</p> 

<div>DIV</div> 

</body> 

</html> 



[arquivo-2.1d.html] 
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5e/efory'(?uery.each(callback) 



Usamos o termo seletorjQuery para designar genericamente um objeto ou array 
de objetos retomado por um simples seletor jQuery ou por um encadeamento 
jQuery. 


Este metodo destina-se a executar uma fungao toda vez que encontra um elemento 
constante do conjunto procurado. Por exemplo: voce deseja percorrer o DOM e 
mudar a cor de fundo de todos os divs do documento. Observe, a seguir, que se 
criou um botao para disparar o evento e percorreu-se o DOM usando o metodo 
each() para executar a mudanga de cor de fundo. 

Exemplo: 

<style type="text/css" media="all"> 
p {cursor:pointer; color:#00f;} 

div {width:200px; height:lOOpx; border:lpx solid #000; margin:20px;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js”x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('button').click(function() { 

S('div').each(function(i) { 

$(this).css(' background ' , 'red’) ; 

}); 

}); 

</script> 

</head> 

<body> 

<div>DIV</div> 

<div>DIV</div> 

<div>DIV</div> 

<button type="button">Colorir DIVS</button> 



[arquivo-2.1e.html] 


O script comcga procurando o botao e a cstc atribui a tarcfa dc disparar a 
execugao dc uma fungao ao scr clicado. Tal fungao procura cada um dos divs 
no documento e estiliza-os com fundo na cor vermelha. Voce deve estar se per- 
guntando: por que complicar sc basta declarar S('div').css('background', 'red')? 
Certo, essa simples declaragao teria o mesmo efeito, contudo note que existe um 
parametro i na fungao definida etn each(). Esse parametro retorna um contador 
dos elementos cncontrados. Essa fungao funciona corno um loop for do JavaScript. 
No arquivo de exemplo, acrescentou-se um alert(i) para voce acompanhar o 
funcionamento da fungao. 
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seletorjQuery.\enqih 

Esta propriedade rctorna o numcro dc ocorrencias do elemento-alvo. 
Exemplo: 

<style type="text/css" media="all"> 
p {cursor:pointer;} 

div {width:200px; height:lOOpx; borderrlpx solid #000; margin:20px;} 

</style> 

<script type="text/javascript" src»"../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('p').click(functionQ { 
var nDiv = S('div').length; 

S('<span>Foram encontradas ’ + nDiv + ' DIVs.</span>').appendTo('p'); 

}); 

}); 

</script> 

</head> 

<body> 

<p>Clique aqui para saber quantos divs existem nesse documento.<br /></p> 
<div>DIV</div> 

<div>DIV</div> 

<div>DIV</div> 



[arquivo-2.1f.html] 


seletorjOuery.eq{posi0o) 

Esta fungao rctorna uma dcterminada ocorrencia do conjunto dcelemcntos-alva 
O argumento posi^ao rcferc-se a posi^ao da ocorrencia no conjunto sclccionado. 
No exemplo a seguir, selecionou-se o tcrcciro item da lista. Nao esque^a que cm 
JavaScript a contagem comc^a cm 0 (zero). 

Exemplo: 


<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

$(document).ready(functionO { 

$('1i’).eq(2).css('color', 'red') 

)}; 

</head> 
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<body> 

<ul> 

<li>Item l</1i> 
<li>Item 2</1i> 
<li>Item 3</li> 
<li>Item 4</1i> 
<1i>Item 5</li> 
</ul> 



[arquivo-2.1g.html] 


seletorjQuery. get() 

Esta fun^ao destina-se a acessar elementos do DOM sem emprego das funcio- 
nalidades jQuery. Pode ser usada para manipular diretamente o DOM e foi 
criada para resolver problemas de retro-compatibilidade. Retorna um array de 
elementos. 

Exemplo: 


<sty1e type="text/css" media="all"> 
div {margin:20px 0; color:red;} 

</style> 

<script type="text/javascript" src«"../jquery-1.2.6.js"x/script> 
<script type=”text/javascript”> 

S(document).ready(function() { 
function conteudoParagrafos(p) { 
var arrayConteudos = [ ]; 
for (var i = 0; i < p.length; i++) { 
arrayConteudos.push(p[i].innerHTML); 

} 

S('div').text(arrayConteudos.join(' - ')); 

} 

$('button').click(function() { 

conteudoParagrafos($('p').get0.reverse()); 

}); 

$('.reset').click(function() { 

$('div').emptyO; 

}); 

}); 

</script> 

</head> 
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<body> 

cbutton type="button">Rodar script</button> 

<button type="button" class="reset">Reset</button> 
<p>Paragrafo um.</p> 

<p>Paragrafo dois.</p> 

<p>Paragrafo tres.</p> 

<divx/div> 



[arquivo-2.1h.html] 


seletorjQuery.qe\(indice) 

Esta fungao tem a mcsma finalidade da anterior e destina-se a acessar um ele- 
mento cspecifico do conjunto dc elementos rctornado. O parametro indice indica 
a posi^ao do elemento na array retornada. 


seletorjQuery.\n<\ex(alvo) 

Esta fun^ao retorna o indice do elemento definido no parametro alvo. Acontagem 
comeya em 0 (zero) e, caso nao exista um indice para o alvo, a fun^ao retorna o 
valor -1. No exemplo a seguir, o script percorre e encontra todos os paragrafos 
do documento e recolhe seus indices. A demonstrayao, no exemplo, se faz com 
um clique em cada um dos paragrafos. 

Exemplo: 

<sty1e type="text/css” media="all"> 
div {margin:20px 0;} 
span {color:red;} 
p {cursor:pointer;} 

</sty1e> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('p').click(functionO { 

var indice = $(’p').index(this); 

S('div'),append('0 indice deste paragrafo e: <span>' + indice + '</spanxbr />'); 

}); 

SC.reset').c1ick(function() { 

SCdiv^.emptyO; 

}); 

}): 

</script> 

</head> 
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<body> 

<button type="button" c1ass="reset">Reset</buttonxbr /> 
<b>Clique em cada um dos paragrafos abaixo <br /> 
para revelar seu indice</b> 

<p>Paragrafo ura.</p> 

<p>Paragrafo dois.</p> 

<p>Paragrafo tres.</p> 

<divx/div> 



[arquivo-2.1i.html] 


jQuery.noConflictO 

Esta fungao e utilizada para evitar conflitos da biblioteca jQuery com outras 
bibliotecas usadas no mesmo documento e que fazem uso do alias S. 

Existem varias bibliotecas JavaScript disponivcis c, sc voce optou por usar 
JQuery,sem duvida fez uma escolha intcligente e nao estara impcdido de utilizar 
outras bibliotecas em um mesmo projeto, desde que tome alguns cuidados para 
evitar conflitos. 

Conflitos ocorrem porque diferentes bibliotecas, com scus diversos metodos, 
usando uma sintaxe comum para invocar suas funcionalidades (o alias S ou o 
construtor $()), acabam por permitir que as diferentes bibliotecas tentem inter¬ 
pretar o mesmo codigo, criando um caos como cste: a biblioteca A tentando 
interpretar uma fungao criada para a biblioteca B e vice-versa. 

Existem diferentes tecnicas para evitar conflitos e a tnais simples e escrever 
codigos usando o prefixo jQuery no lugar do alias $. Essa soluyao, apesar de 
simples, tern a desvantagem de aumentar o niimero de caracteres a digitar e e 
facil perceber que ira exigir trabalho extra, principalmente em scripts extensos. 
A sintaxe geral para essa solu^ao e mostrada a seguir: 

<scri pt sro"outra_bi bl i oteca. js"x/scri pt> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript”> 
jQuery.noConflictO; 

// Script para biblioteca jQuery usando jQueryO 
jQuery(document).ready(function() { 
jQuery(’p').5how(); 
jQueryCdiv'j.cssCcolor', 'red'); 
jQuery(...; 


}); 
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// Segue script para outra biblioteca usando alias S() 
$('#nome-id’).show(); 

$(...; 

</script> 


A segunda solugao consiste em personal izar um alias para uso proprio. Gra¬ 
mas a funcionalidades nativas da biblioteca, voce pode criar o nome que bem 
entender para substituir o alias nativo S. Assim, e possivel adotar sintaxe tais 
como as mostradas a seguir: 

$maujor('div').hide(); 

Scarlosalberto('p').show(); 

Sj('span').fadeln(); 

O primeiro e segundo exemplos nao sao uma boa escolha para um alias, pois 
deve-sc procurar simplicidade e rcdugao dc digitagao. O ultimo exemplo c bem 
melhor e o mais simples possivel, pois se cscolheu uma letra apcnas para alias. 
Veja a seguir a sintaxe para sua criagao: 


<script src="outra_biblioteca.js"x/script> 

<script type="text/javascript” src«". ./jquery-1.2.6. js"x/script> 
<script type="text/javascript"> 
var $j = jQuery.noConflictO; 

// Script para biblioteca jQuery usando Sj() 

$j(document).ready(function() { 

SjC'p'J.showO; 

SjCdiv’j.cssC'color', ’red’); 

Sj(...; 


}); 

// Segue script para outra biblioteca usando alias S() 
$('#nome-id').show(); 

$(...; 

</script> 


A terceira solugao permite-lhe usar o alias S tanto para a biblioteca jQuery 
como para outra biblioteca. Nessa solugao, voce cria um script quc funciona 
como uma especie de container para scus codigos jQuery e inserc os scripts da 
outra biblioteca fora desse container. O container nada mais e quc uma fungao 
definindo $ como jQuery. O exemplo a seguir esclarece essa solugao: 
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<script src="outra_bib1ioteca.js M x/script> 

<script type="text/javascript" src=". ./jquery-1.2.6. js"x/script> 
<script type="text/javascript"> 
jQuery. noConflictO; 

S(document).ready(function() { 

(function(S) { 

// Script para biblioteca jQuery usando S() 
J('p').showO; 

SCdiv'j.cssCcolor', 'red'); 

$(...; 

}) (jQuery); 

)}; 

// Segue script para outra biblioteca usando alias S() 
$('#nome-id').show(); 

</script> 


2.2 Seletores jQuery 

Para um solido entendimento de seletores, e necessario que voce esteja fami- 
liarizado com a arvore do documento e o consequente relacionamento entre os 
elementos que a compoem. Nao e sem razao que se emprega o termo arvore do 
documento e a melhor maneira de se entender seu funcionamento e relaciona- 
mentos e fazer analogia com a conhecida arvore genealogica examinando o grau 
de parcntesco entre os elementos de um documento. 

A terminologia tecnica de referenda aos inter-relacionamentos na arvore do 
documento utiliza os mesmos termos usados em arvore genealogica. Na arvore 
de um documento, existem elementos-pai,elementos ancestrais,elementos-filho, 
elementos-irmao e assim por diante. 

Considere um documento com a seguinte marca^ao: 

<body> 

<div id="topo"> 

<hl>empresa</hl> 

<ul id="nav"> 

<lixa href="#">Link l</ax/li> 

<lixa href="#">Link 2</ax/li> 

<lixa href="#">Link 3</ax/li> 

</ul> 

</div> 
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<div id="principal"> 

<h2>Titulo</h2> 

<p>...paragrafo <em>italico</em>...</p> 

<h2>Titulo</h2> 

<blockquotexp>.. .citato.. .</px/blockquote> 

</div> 

<hr /> 

</body> 

</html> 

Veja, na figura 2.1, o diagrama representative) da arvore do documento. 



Figure 2.1 - Arvore do documento. 

Veja alguns exemplos da terminologia que se aplica aos elementos mostrados 
na arvore do documento: 

• body c ancestral de todos os elemen tos. Todos os elemen tos sao descendentes 
de body. 

• ul e ancestral de li e de a. li e a sao descendentes de ul. 

• 1 i e elemento-filho de ul. ul e elemento-pai de li. 

• blockquote e irtndo de p e tambem tem um filho p. 

• blockquote e irtnao adjacente de h2 

• em e p nao sao irmdos. 

• 11 nao e filho de div, mas e seu descendente. 

A tabela 2.1 mostra como o relacionamento entre elementos na arvore do 
documento determina a sintaxe do seletor. Os termos serao frequentemente 
citados neste capitulo e seu entendimento e fundamental para a compreensao 
do funcionamento dos seletores. 
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Tabela 2.1 - Elementos na drvore do documento 


Termo 

Relacionamento 

Sintaxe adotada 

Elemento-pai 

0 ascendente direto do elemento 

pai > filho 

Elemento-filho 

0 descendente direto do elemento 

pai > Mho 

ElementonimSo 

Elementos-filho de urn mesmo pai 


Elemento adjacente 

Elemento que se segue a outro 

A+B 

Elemento-irmao adjacente 

Elementos-filho do mesmo pai 

A~ B 


2.2.1 Seletores simples 

m 

Seletor de id: acessa o elemento cujo valor do atributo idtenha sido especificado 
no argumento. 

Exemplo: 


<style type="text/css" media="all"> 

div {width:200px; height:lOOpx; border:lpx solid *000; margin:20px;} 
</style> 

<script type="text/javascript" src=”../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

S(document).ready(function() { 

$('button').click(functionO { 

S( 1 #diferente 1 ).css('background 1 , 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Veririelha</button> 

<div>DIV</div> 

<div>DIV</div> 

<div id="diferente">DIV</div> 



[arquivo-2.2.1a.html] 


Nesse exemplo, utilizou-se o seletor id $('#diferente’) para acessar o div ao 
qual sera anexado o comportamento definido no script (mudar a cor de fundo 
para vermelha). 
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$(classe) 

Seletor de classc: acessa os elementos cujo valor do atributo class tcnha sido 
especificado no argumento. 

Exemplo: 


<style type="text/css" media="all"> 

div {width:200px; height:lOOpx; border:lpx solid #000; margin:20px;} 
</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() { 

$('button').click(function() { 

$('.diferente').css('background', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Vermelha</button> 

<div class="diferente">DIV</div> 

<div class="diferente">DIV</div> 

<div>DIV</div> 



[arquivo-2.2.1 b.html] 


Nessc exemplo, utilizaram-se urn botao para disparar o evento e o seletor dc 
classc $(' .diferente') para accssar os dois divs, os quais sera anexado o compor- 
tamento definido no script (mudar a cor dc fundo para vermelha). 


$(elemento) 

Seletor de elementos: acessa todos os elementos especificados no argumento. 
Exemplo: 


<style type="text/css" media="aH"> 

div {width:200px; height:lOOpx; border:lpx solid #000; margin:20px;} 
</style> 

<script type="text/javascript" src="../jquery-1.2.6. js"x/script> 
<script type="text/javascript"> 

$(document),ready(function() { 

$(’button').click(function() { 
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SCdiv'J.cssCbackground', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Vermelha</button> 
<div>DIV</div> 

<div>DIV</div> 

<div>DIV</div> 



[arquivo-2.2.1c.html] 


Nesse exemplo, utilizaram-se um botao para disparar o evento e o seletor de 
elemento $('div') para accssar todos os divs cxistentcs no documcnto, os quais 
sera anexado o comportamento definido no script (mudar a cor de fundo para 
vermelha). 


$[seletorl, seletor2, seletor3 ,...) 

Grupamcnto de seletores: acessa um agrupamento de seletores. C) argumento e 
uma lista dos seletores a accssar. 

Exemplo: 

<style type="text/css M media="all"> 

div {vvidth:200px; height:lOOpx; border:lpx solid #000; margin:20px;> 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javasc ript"> 

$(document).ready(function() { 

$('button').click(function() { 

$('p, .diferente, li').css('background\ 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Vermelha</button> 

<div>DIV</div> 

<p>Texto de um paragrafo</p> 

<div class="diferente">DIV com class="diferente"</div> 

<p class="outra"> Paragrafo com class="outra"</p> 
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<ul> 

<li>Item l</li> 
<li>Item 2</li> 
<1 i>Item 3</li> 
</ul> 



[arquivo-2.2.1d.html] 


Nesse exemplo, utilizaram-se um botao para disparar o evento e o grupo de 
seletores p, .diferente c li para acessar todas as instancias dos elementos as quais 
sera anexado o comportamcnto definido no script (mudar a cor de fundo para 
vcrmelha). Note que o paragrafo ao qual se atribuiu a classe outra c alvo do se- 
letor c foi cstilizado, pois a presenga do atriburo class nao altera a condigao do 
elemento de ser um paragrafo. 


2.2.2 Seletores compostos 

Seletor composto eaquele constituido pela combina^ao de doisou maisseletores 
simples. A combina^ao entre seletores simples para criar um seletor composto 
segue uma sintaxe propria e e feita com o emprego de tres sinais de combina^ao 
como descrito na tabcla 2.2. 


Tabela 2.2 - Sinais de combinaqao 


Sinai de combinagao 

Exemplo ilustrativo 

Nota 

Espago em branco 

div p em 

Obrigatbrio usar um ou mais espagos entre seletores 

Sinai de maior ">" 

div > p ou div>p 

Espagamento facultativo entre seletores 

Sinai de adigao v 

p + a ou p+a 

Espagamento facultativo entre seletores 


$ (ancestral descendente) 

Acessa o elemento descendente do ancestral especificado no argumenta 
Exemplo: 

<style type="text/css" media="all"> 

div {width:200px; height:lOOpx; border:lpx solid #000; margin:20px;} 
</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 
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$(document).ready(function() { 

$('button').click(function() { 

$('div span').css('background', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

cbutton type="button">Vermelha</button> 

<div> 

<p>Paragrafo filho do div com <span>texto</span> marcado com span</p> 
</div> 

<p>Paragrafo filho de body com <span>texto</span> marcado com span </p> 



[arquivo-2.2.2a.html] 


Nesse exemplo, uriliznram-se um botao para disparar o evento e o seletor ancestral 
descendente para acessar os elementos span descendentes do div (neste exemplo, 
apenas um elemento span) aos quais sera anexado o comportamento definido 
no script (mudar a cor de fundo para vermelha). Note que os dois elementos 
span constantes do DOM sao filhos de um paragrafo, mas somente o primeiro e 
descendente do div. 


$(pai > filho) 

Acessa o elemento-filho do pai especificado no argumento. 

Exemplo: 

<style type="text/css" media=”all"> 

div {width:200px; height:lOOpx; border:lpx solid #000; margin:20px;} 
</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript''> 

$(document).ready(function() { 

$('button').click(function() { 

S('div > span').css('background', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Vermelha</button> 
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<div> 

<p>Paragrafo filho do div com <span>texto</span> marcado com span</p> 

</div> 

<p>Paragrafo filho de body com <span>texto</span> marcado com span </p> 

♦1 [arquivo-2.2.2b.html] 

Utilizaram-sc um botao para disparar o evento c o selcror-pai-filho para accssar 
os elementos span filho do div (nesse exemplo, ha duas ocorrencias do elemento 
span) aos quais sera anexado o comporramento definido no script (mudar a cor 
de fundo para vcrmclha). Observe que a marcayao usada nesse exemplo e a 
mesma do exemplo anterior, no entanto como nao ha elemento span filho do div 
- sao filhos dos paragrafos nada acontece quando se clica o botao. Caso tivesse 
usado o seletor $('p > span'), os dois elementos span seriam alvo do seletor. Faya 
uma copia do arquivo e altere o seletor como sugerido. 


$(anterior + proximo) 

Acessa o elemento proximo que se segue imediatamente ao elemento anterior. 
Exemplo: 


<style type="text/css" media="all"> 

div {width:200px; height:lOOpx; border:lpx solid #000; margin:20px;} 
</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

S(document).ready(function() { 

$('button').click(function() { 

S('div + p').css('background', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Vermelha</button> 

<p>Paragrafo antes do div</p> 

<div> 

<p>Paragrafo filho do div</p> 

</div> 

<p>Paragrafo que se segue ao div</p> 

<p>Paragrafo que seguinte</p> 



[arquivo-2.2.2c.htmll 
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Ncsse excmplo, utilizaram-sc uni botao para disparar o evcnto c o sclctor 
anterior proximo para accssar o elemento p imediatamente apos o div ao qual 
sera anexado o comportamento definido no script (mudar a cor de fundo para 
vermelha). 

$(anterior ~ irmaos) 

F.ste e um seletor previsto nas CSS 3 que acessa todos os elementos irmaos e que 
sc seguem ao elemento anterior. 

Exemplo: 

• • • 

<style type="text/css” media="all"> 

div {width:200px; height:lOOpx; border:lpx solid #000; margin:20px;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

S(document).ready(function() { 

$('#btn-vermelha').click(function() { 

S('h2 - p'),css('background', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type=”button">Vermelha</button> 

<p>Paragrafo antes do cabeqalho h2</p> 

<h2>Cabe<;alho h2</h2> 

<p>Primeiro paragrafo apos o cabe<;alho h2</p> 

<p>Segundo paragrafo apos o cabegalho h2</p> 

<div>DIV</div> 

<p>Terceiro paragrafo apos o cabe<;alho h2</p> 

<div> 

<p>Paragrafo dentro de um div</p> 

</div> 

[arquivo-2.2.2d.html] 

Nesse exemplo, utilizaram-se um botao para disparar o evento e o seletor 
anterior irmao para acessar todos os elementos p irmao que estao apos o cabegalho 
h2 c aos quais sera anexado o comportamento definido no script (mudar a cor 
de fundo para vermelha). 
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Note o seguinte: 

■ O paragrafo antes do cabe^alho h2 nao e selecionado, pois o seletor e para 
elementos posteriores a h2. 

■ O primeiro e segundo paragrafos apos h2 sao selecionados porque sao 
filhos do mesmo pai (o elemento body), portanto irmaos. 

■ O elemento div que se segue nao e selecionado, pois o seletor e para para¬ 
grafos. 

■ O paragrafo que se segue ao di v c selecionado, pois e filho de body, esta apos 
h2 e, portanto, e irmao dos paragrafos anteriores. 

■ O paragrafo dentro do div que se segue nao e selecionado, pois nao sendo 
filho de body (e filho de um div), nao e irmao dos paragrafos anteriores. 


2.2.3 Seletores - Filtros basicos 

Denominam-se seletores filtros basicos os seletores do tipo pseudosseletores 
que se destinam a filtrar uma condigao particular de um seletor simples ou 
composto. 


seletonfirst 

Acessa a primeira ocorrcncia do conjunto de elementos selecionados por 
seletor. 

Exemplo: 


<script type="text/javascript" src=”../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

$(document).ready(function() { 

S('#btn-vermelha').click(function() { 

S ('liifirst'J.cssCbackground', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Vermelha</button> 

<ul> 

<1i>Primeiro item</li> 
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<li>Segundo item</li> 
<li>Terceiro item</li> 
<li>Quarto item</li> 
<li>Quinto item</1i> 
</ul> 


♦1 [arquivo-2.2.3a.html] 

Nesse exemplo, urilizaram-sc um botao para disparar o evento e o seletor :first 
para acessar o primeiro item da lista ac> qual sera anexado o comportamento definido 
no script (mudar a cor de fundo para vermelha). 

se/efodast 

Accssa a ultima ocorrencia do conjunto dc elementos sclecionados por seletor. 
Exemplo: 


<scri pt type="text/javascri pt" src="../jquery-1.2.6. js"x/scri pt> 
<script type="text/javascript"> 

$(document).ready(function() { 

S('#btn-venne']ha , ).click(function() { 

S('li:last’).css('background', ’red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Verinelha</button> 

<ul> 

<1i>Primeiro item</li> 

<1i>Segundo item</li> 

<li>Terceiro item</li> 

<li>Quarto item</li> 

<li>Quinto item</li> 

</ul> 


♦ [arquivo-2.23b.html] 

Nesse exemplo, utilizaram-se um botao para disparar o evento e usamos o 
seletor :last para acessar o ultimo item da lista ao qual sera anexado o compor¬ 
tamento definido no script (mudar a cor de fundo para vermelha). 
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seletor1:nol(seletor2) 

Estc e urn selctor previsto nas CSS 3 que acessa o conjunto de selctorcs seletorl, 
excluindo as instancias definidas cm seletor2. 

Exemplo: 


<script type="text/javascnpt" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

S(document).ready(function() { 

S('#btn-verme1ha’).click(function() { 

$('li:not(li:first)’).css('background', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Verme1ha</button> 

<ul> 

<li>Primeiro item</li> 

<li>Segundo item</li> 

<li>Terceiro item</li> 

<li>Quarto item</li> 

<1i>Quinto item</1i> 

</ul> 



[arquivo-2.2.Bc.html] 


Ncssc exemplo, utilizaram-sc um botao para disparar o evento, o scletor 1i para 
acessar todos os elementos itens de lista e o seletor :not para excluir o primeiro 
item da lista ao qual sera anexado o comportamento definido no script (mudar 
a cor de fundo para vermelha).Todos os itens da lista serao selecionados, menos 
o primeiro (not(li:first)). 
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seletor.even 

Estc eum seletor nao prcvisto nas CSS e exclusivo da biblioteca, que accssa as 
ocorrcncias de ordem par do conjunto de elementos selecionados por seletor. 

Exemplo: 


<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

S(document).ready(function() { 

S('#btn-verme1ha’).click(function() { 
SCtneverO.cssCbackground', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Verme1ha</button> 

<table border»"l"> 

<tr> 

<td>Celula indice 0</td> 

</tr> 

<tr> 

<td>Celula indice l</td> 

</tr> 

<tr> 

<td>Celula indice 2</td> 

</tr> 

<tr> 

<td>Ce1ula indice 3</td> 

</tr> 

<tr> 

<td>Celula indice 4</td> 

</tr> 

</table> 



[arquivo-2.2Jd.html] 


Nesse exemplo, utilizaram-se um botao para disparar o evento e o seletor tr: 
even para acessar todas as linhas pares da tabela as quais sera anexado o comporta- 
mento definido no script (mudar a cor de fundo para vermelha). Lembre-se de que, 
na linguagem JavaScript, toda contagem come^a em 0 (zero) e, em consequencia, 
as ocorrencias pares sao a primeira (indice 0, que e contado como sele^ao par), a 
terceira (rndice 2), a quinta (rndice 4), e assim por diante. 
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seletor.odd 

Este e um seletor nao previsto nas CSS e exclusivo da biblioteca, que acessa as 
ocorrencias de ordem impar do conjunto de elementos selecionados por seletor. 

Exemplo: 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

SC'Obtn-vermelha^.clickCfunctionO { 

$('tr:odd').css(’background', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Vermelha</button> 

<table border="l"> 

<tr> 

<td>Celula indice 0</td> 

</tr> 

<tr> 

<td>Celula indice l</td> 

</tr> 

<tr> 

<td>Celula indice 2</td> 

</tr> 

<tr> 

<td>Ce1ula indice 3</td> 

</tr> 

<tr> 

<td>Celula indice 4</td> 

</tr> 

</table> 



[arquivo-2.2Je.html] 


Nesse exemplo, utilizaram-se um botao para disparar o evento e o seletor tr: 
odd para acessar todas as linhas impares da tabela as quais sera anexado o corn- 
portamento definido no script (mudar a cor de fundo para vermelha). Lembre- 
se de que, na linguagem JavaScript, toda contagem corner em 0 (zero) e, em 
consequencia, as ocorrencias impares sao a segunda (indice 1), a quarta (indice 
3), a sexta (indice 5), e assim por diante. 
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seletor.eq((ndice) 

Este e um seletor nao previsto nas CSS e exclusive) da biblioteca, que acessa a 
ocorrencia de ordem indice no conjunto de elementos selecionados por seletor. 

Exemplo: 


<scri pt type="text/javascri pt" src=”.. /jquery-1.2.6. js”x/scri pt> 
<script type="text/javascript"> 

S(document).ready(function() { 

S('#btn-vermelha').click(function() { 

$('td:eq(4)').css('background', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Verinelha</button> 

<table border*’T’> 

<tr> 

<td>td 0</td> 

<td>td l</td> 

</tr> 

<tr> 

<td>td 2</td> 

<td>td 3</td> 

</tr> 

<tr> 

<td>td 4</td> 

<td>td 5</td> 

</tr> 

<tr> 

<td>td 6</td> 

<td>td 7</td> 

</tr> 

</table> 


♦1 [arquivo-2.2.3f.html] 

Nesse exemplo, utilizaram-se um botao para disparar o evento e o seletor td: 
eq(4) para acessar a celula da tabela que ocupa a quarta posi^ao no conjunto das 
celulas selecionadas a qual sera anexado o comportamento definido no script 
(tnudar a cor de fundo para vermelha). Lembre-se de cjue, na linguagem JavaScript, 
toda contagem come^a em 0 (zero) e, em consequencia, a quarta ocorrencia 
corresponde a quinta celula. 
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seletor.qt[indice) 

Estc e urn seletor nao previsto nas CSS e exclusive da biblioteca, que acessa todas 
as ocorrencias do conjunto de elementos selecionados por seletor cujo l'ndice e 
maior que o l'ndice definido no parametro indice. 

Exemplo: 


<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

$(document).ready(function() { 

$C#btn-vermelha').click(function() { 

$('td:gt(4)’).css(’background', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Vermelha</button> 

<tab1e border="l”> 

<tr> 

<td>td 0</td> 

<td>td l</td> 

</tr> 

<tr> 

<td>td 2</td> 

<td>td 3</td> 

</tr> 

<tr> 

<td>td 4</td> 

<td>td 5</td> 

</tr> 

<tr> 

<td>td 6</td> 

<td>td 7</td> 

</tr> 

</table> 



[arquivo-2.2.3g.html] 


Ncsse exemplo, utilizaram-se um botao para disparar o evento e o seletor td: 
gt(4) para acessar as celulas cujo indice e maior que quatro no conjunto das celulas 
selecionadas, as quais sera anexado o comportamento definido no script (mudar 
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a cor dc fundo para vermelha). Lcmbrc-sc dc que, na linguagem JavaScript, toda 
contagem come^a cm 0 (zero) e, em consequencia, a quarta ocorrencia corres- 
ponde a quinta celula. 

seletor.\t(indice) 

Este c um seletor nao previsto nas CSS e exclusivo da biblioteca, que acessa todas 
as ocorrencias do conjunto de elementos selecionados por seletor cujo fndice e 
menor que o indice definido no parametro indice. 

Exemplo: 

• • • 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

SC'#btn-vermelha').click(function() { 

S('td:1t(4)').css('background', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Vermelha</button> 

<table border="l"> 

<tr> 

<td>td 0</td> 

<td>td l</td> 

</tr> 

<tr> 

<td>td 2</td> 

<td>td 3</td> 

</tr> 

<tr> 

<td>td 4</td> 

<td>td 5</td> 

</tr> 

<tr> 

<td>td 6</td> 

<td>td 7</td> 

</tr> 

</table> 



[arquivo-2.2.3h.html] 
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Ncsse cxcmplo, utilizaram-sc um botao para disparar o evcnto c o sclctor 
td:lt(4) para accssar as cclulas cujo mdice c mcnor quc quatro no conjunto das 
celulas selecionadas, as qua is sera anexado o comportamenro definido no script 
(mudar a cor de fundo para vermelha). Lembre de que, na linguagem JavaScript, 
toda contagem comeya em 0 (zero) e, em consequencia, a quarta ocorrencia 
corresponde a quinta celula. 

$(jieader) 

Este e um seletor nao previsto nas CSS e exclusivo da biblioteca,que acessa todas 
as ocorrencias de cabe^alhos de qualquer nivel, ou seja, todos os elementos hi 
ate h6. 

Exemplo: 


<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

S(document).ready(function() { 

S('#btn-vermelha').click(function() { 

$(':header').css('background', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Vermelha</button> 

<hl>cabe<;alho nivel l</hl> 

<p>texto de um paragrafo</p> 

<h2>cabe<;alho nivel 2</h2> 

<p>texto de um paragrafo</p> 

<h3>cabei;alho nivel 3</h3> 

<p>texto de um paragrafo</p> 

<h4>cabecalho nivel 4</h4> 


♦J [arquivo-2.2.3i.html] 

Nesse exemplo, utilizaram-se um botao para disparar o evento e usamos o 
seletor :header para acessar todos os cabe^alhos, aos quais sera anexado o corn- 
portamento definido no script (mudar a cor de fundo para vermelha). 
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se/efor:animated 

Estc enm seletor nao prcvisto nas CSS e exclusivo da biblioteca, que acessa as 
ocorrcncias do elemento seletor para as quais se tcnha definido um script de 
animayao. Esse seletor sera visto com mais detalhes ao se abordarem as tecnicas 
jQuery de anima^ao. 


2.2.4 Seletores de conteudo 

seletorxonta\n$(texto) 

Este e um seletor nao previsto nas CSS e exclusivo da biblioteca, que acessa 
todas as ocorrencias de seletor que contenham um texto (string) definido no 
parametro texto. 

Exemplo: 


<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

$(document).ready(function() { 

J('#btn-vermelha').click(function() { 

S('p:contains(' Mau jor').css('background', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Vermelha</button> 

<p>Visite o site do Maujor</p> 

<p>Estude CSS e jQuery</p> 

<p>HTML 5 esta em fase de estudos</p> 

<p>Maujor escreveu este livro</p> 

<span>Elemento span contendo Maujor</span> 

<p>paragrafo contendo maujor</p> 



[arquivo-2.2.4a.html] 


Nesse exemplo, utilizaram-se um botao para disparar o evento e o seletor : 
contais para acessar todos os elementos p que contem a palavra Maujor, aos quais 
sera anexado o comportamento definido no script (mudar a cor de fundo para 
vermelha). Note que nao se selecionaram o elemento span (nao e paragrafo) nem 
o elemento p contendo maujor (minuscula), pois o seletor e sensivel ao tamanho 
da caixa da string passada pelo parametro texto. 
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seletor.empiy 

Estc e um seletor previsto nas CSS 3 que acessa todas as ocorrencias vazias dc 

seletor. 

Exemplo: 

<style type="text/css" media="all"> 
table tr td {height:20px;} 

</style> 

<script type="text/javascript" src=". ./jquery-1.2.6. js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

SC^btn-vermelha'J.clickCfunctionO { 

SCtdiempty.cssCbackground', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

cbutton type="button">Veririelha</button> 

<table border="l"> 

<tr> 

<td>Celula indice 0</td> 

</tr> 

<tr> 

<td></td> 

</tr> 

<tr> 

<td>Celula indice 2</td> 

</tr> 

<tr> 

<td>Celula indice 3</td> 

</tr> 

<tr> 

<tdx/td> 

</tr> 

</table> 


♦ I [arquivo-2.2.4b.html] 

Ncssc exemplo, utilizaram-se um botao para disparar o cvcnto c o seletor td: 
empty para acessar todas as celulas da tabela que estao vazias, as quais sera anexado 
o comportamento definido no script (mudar a cor de fundo para vermelha). 
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seletor1:has(seletor2) 

Estc e um selctor nao previsto nas CSS e exclusivo da biblioteca, que acessa tod as 
as ocorrencias do clcmcnto definido pclo seletorl que contcnham pclo menos 
uma ocorrencia do elemento definido pelo seletor2. 

Exemplo: 


<script type="text/javascript" src="../jquery-1. 2 . 6 .js"x/script> 
<script type="text/javascript"> 

$(document).ready(function() { 

$(’#btn-vermelha').click(function() { 

$('p:has(strong).css( , background', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button”>Veririelha</button> 

<p>Texto com <i>palavra</i> em italico</p> 

<p>Texto com <b>palavra</b> em negrito</p> 

<p>Texto com <span>palavra</span> dentro de span</p> 

<p>Texto com <strong>palavra</strong> com forte enfase</p> 
<p>Texto sem marcacao extra</p> 


♦1 [arquivo-2.2.4c.html] 

Nesse exemplo, utilizaram-se um botao para disparar o evento e o seletor 
p:has(strong) para accssar todas as ocorrencias dc paragrafos que contcnham o 
elemento strong, aos quais sera anexado o comportamento definido no script 
(mudar a cor de fundo para vermelha). 

Note que enquanto o selctor :contains() estudado antcriormcnte sclccionou 
elementos que contem um determinado texto, este seletor :has() selecionou ele- 
mentos que contem um outro determinado elemento. 


seletor.parenl 

Este e um seletor nao previsto nas CSS e exclusivo da biblioteca, que acessa todas 
as ocorrencias de elementos que sejam elementos-pai, ou seja, elementos que 
tenham filhos, inclusive texto (text-node) como filho. 

Exemplo: 
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<style type="text/css” media="all"> 
p {height:20px;} 

</sty1e> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

$(document).ready(function() { 

$('#btn-vermelha').click(function() { 
SCpiparentJ.cssCbackground', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Veririelha</button> 

<p>Texto com <i>palavra</i> em italico</p> 

<px/p> 

<p>Texto sem marcagao extra</p> 


9i [arquivo-2.2.4d.html] 

Nesse exemplo, utilizaram-se um botao para disparar o evento e o seletor p: 
parent para acessar todas as ocorrencias de paragrafos que contem elementos-fi- 
lho as quais sera anexado o comportamento definido no script (mudar a cor de 
fundo para vermclha). Observe que na marcagao ha um elemcnto paragrafo vazio 
e que nas CSS se definiu uma altura de 20px para os paragrafos. Esse elemento 
nao c alvo de seu seletor. Para entender o funcionamento dcsse seletor, fa^a uma 
copia do arquivo exemplo e altcre o seletor para S('p’), pois assim notara que 
na visualiza^ao de sua copia, no funcionamento do script, aparece o paragrafo 
vazio com fundo na cor vermelha. 


2.2.5 Seletores de visibilidade 


:hidden 

Este e um seletor nao previsto nas CSS e exclusivo da biblioteca, que acessa todas 
as ocorrencias de elementos que estejam ocultos no documento, incluindo campos 
de formulario input do tipo hidden. 



Normalmente. este seletor acessa tamb6m os elementos de marcagao contidos 
na segao head do documento, portanto se esta nao e sua intengao. limite a busca 
a segao body com a seguinte sintaxe: S(': hidden', $(’body')) 
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Exemplo: 

<style type="text/css" media="a11"> 

hi {display:hidden;} /* esconde o elemento hi */ 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javasc ript"> 

$(document).ready(functionO { 

$('button').click(function() { 

var totalOcultos = S(’:hidden’, SC’body')).length; 
var inputOcultos = $(’input:hidden').length; 

SCspan'J.textC’Foram encontrados ’ + totalOcultos + 

' elementos ocultos, sendo ' + inputOcultos + 

’ elementos input do tipo hidden.') /* escrever o resultado */ 

}); 

}); 

</script> 

</head> 

<body> 

•cbutton type="button">Ocultos</button> 

<hl>Cabegalho oculto por dedaragao CSS</hl> 

<form> 

<input type="hidden" /> 

<input type="hidden" /> 

</form> 

<span></span> <!—apui jQuery escreve os resultados de elementos ocultos encontrados —> 



[arquivo-2.2.5a.html] 


Nesse exemplo, utilizaram-se urn botao para disparar o evento e o seletor : 
hidden duas vezes: a primeira para acessar o total de ocorrencias de elementos 
ocultos e a segunda para acessar a ocorrencia de elementos input do tipo hidden. 
Os numeros de ocorrencias foram passados a variaveis e escritos no documento 
para constatayao do funcionamento do script. 

Note que elementos ocultos pclas declara^ocs CSS di splay :none (como mostrado 
no exemplo) ou vi si bi 1 i ty: hi dden sao accssados pelo seletor. 

Esse seletor admitc as seguintes sintaxes: 

Sintaxe Descrigao 

$(': hi dden ') Acessa todos os elementos ocultos no documento, incluindo 

os elementos constantes da seg'ao head, tais como title, style, 
scripts, meta etc. 
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Sintaxe Descriqao (cont.) 

$(’:hidden', S(’body')) Accssa rodos os elementos ocultos no documenro quc 

constem da scgao body. Veja jQuery(expressao, [contexro]) 
cm [C2S2.1], 

$('se?etor:hidden') Acessa todos os elementos do tipo seletor , ocultos no 

documento. 

Sugestao: faga uma copia do arquivo dc cxcmplo e retire a selc^ao contextual 
S(’body') do seletor. Voce ira notar quc onumcrode elementos ocultos rctornados 
aumentou, pois na visualiza^ao de sua copia alrerada, no funcionamento do 
script, foram inclutdos os elementos da se<;ao head. 


visible 

Este e um seletor nao previsto nas CSS e exclusivo da biblioteca, quc acessa todas 
as ocorrencias de elementos visiveis (nao ocultos) no documento. 



Normalmente, este seletor acessa tambem os elementos de marcagao contidos 
na segao head do documento, portanto se esta nao e sua intengao, limite a busca 
a segao body com a seguinte sintaxe: $(': visible*, S(’body')) 


Excmplo: 

<script type="text/javascript" src«”../jquery-1.2.6.js"x/script> 

<script type="text/javasc ript"> 

$(document).ready(function() { 

SCbutton^.clickCfunctionO { 

var totalVisiveis = $( 1 :visible’, $(’body')).length; 

SCspan^.textCForam encontrados ' + totalVisiveis + 

' elementos visiveis no documento.') /* escrever o resultado */ 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Ocultos</button> 

<hl>Cabegalho de nivel l</hl> 

<p>Texto de um paragrafo</p> 

<spanx/span> <!—aqui jQuery escreve o resultado de elementos visiveis encontrados — > 

♦1 [arquivo-2.2.5b.html) 

Nesse exemplo, utilizaram-se um botao para disparar o evento e usamos o 
seletor :visible para acessar o total de ocorrencias de elementos visiveis na segao 
body do documento. Os resultados foram passados a uma variavel e escritos no 
documento para constatayao do funcionamento do script. 
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Note que elementos ocultos pelas declaragoes CSS display:none ou visibility: 

hi dden nao sao acessados pelo seletor. 

Esse seletor admite as seguintes si maxes: 

Sintaxe Descri^ao 

$(':visible’) Acessa todos os elementos visfveis no documcnto, 

incluindo os elementos constanres da se^ao head, tais 
como title, style, scripts, meta etc. 

SC : visible ’, S ('body')) Acessa todos os elementos visfveis no documento que 

constem da se^ao body. 

$('se7etor:visible') Acessa todos os elementos do tipo seletor, visfveis no 

documento. 

2.2.6 Seletores de atributo 

Os seletores de atributo sao previstos nas CSS 3. 

seletor[atributo] 

Acessa todas as ocorrencias do elemento seletor para o qual se tenha declarado 

o atributo definido no parametro atributo. 

Exemplo: 


<scri pt type="text/javascri pt" src="../jquery-1.2.6. js"x/scri pt> 

<script type="text/javascript”> 

$(document).ready(function() { 

$('button').click(function() { 

$('p[title]'). css('background', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

ebutton type="button">Vermelha</button> 

<h3>Cabe?alho nivel 3</h3> 

<p>Texto de urn paragrafo <b>sem</b> atributo title.<p> 

<p title="meu_titulo">Texto de uni paragrafo <b>co<n</b> atributo title.</p> 
<p lang="pt-br">Texto de um paragrafo com atributo lang.</p> 

<p title="outro_titulo">Texto de um paragrafo com atributo title.</p> 



[arquivo-2.2.6a.html] 
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Ncsse cxcmplo, utilizaram-se urn botao para disparar o evento c o sclctor 
p[title] para accssar os clcmentos paragrafo quc contcm o atributo title aos 
quais sera anexado o comportamento definido no script (mudar a cor de fundo 
para vermelha). 

seletor[atributo = "valor"] 

Acessa todas as ocorrencias do elemento seletor para o qual se tenha declarado 
o par atributo * "valor". 

Exemplo: 

• • • 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

S('button').click(function() { 

S('p[titie = "meu_titulo"]’)• css('background’, 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Vermelha</button> 

<h3>Cabe<;alho nivel 3</h3> 

<p>Texto de urn paragrafo <b>sem</b> atributo title = "meu_titulo".</p> 

<p title="meu_titulo">Texto de urn paragrafo <b>com</b> atributo 
title = "meu_titulo".</p> 

<p lang="pt-br”>Texto de um paragrafo com atributo lang.</p> 

<p title="outro_titulo">Texto de um paragrafo com atributo 
title = "outro_titulo M .</p> 



[arquivo-2.2.6b.html] 


Ncsse exemplo, utilizaram-se um botao para disparar o evento e o seletor 
p[title = "meu.titulo"] para accssar os clcmentos paragrafo que contcm o atributo 
title com o valor "meu_titulo" aos quais sera anexado o comportamento definido 
no script (mudar a cor de fundo para vermelha). 
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seletor[atributo !='Vfl/o/'] 

Acessa todas as ocorrencias do elemento seletor para o qual o valor do atributo 
declarado cm atributo nao scja valor. Esse seletor e a negagao do seletor anterior, 
ou seja, acessa todos os elementos definidos em seletor que nao sejam acessados 
pelo seletor estudado anteriormente. 

Exemplo: 


<script type="text/javascript" src=". ./jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

S(document).ready(function() { 

$('button').c1ick(function() { 

S('p[title != "meu_titulo"]')• css('background', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Vermelha</button> 

<h3>Cabeca1ho nivel 3</h3> 

<p>Texto de um paragrafo <b>sem</b> atributo title = "meu_titulo".</p> 
<p title="meu_titulo">Texto de um paragrafo <b>com</b> atributo 
title = "meu_titulo ,, .</p> 

<p lang="pt-br">Texto de um paragrafo com atributo lang.</p> 

<p title="outro_titulo">Texto de um paragrafo com atributo 
title = "outro_titulo".</p> 



[arquivo-2.2.6c.html] 


Nesse exemplo, utilizaram-se um botao para disparar o evento e o seletor 
p[ti tie !■ "meu_titulo"] para accssar os elementos paragrafo que nao content o 
atributo title com o valor "meu.titulo" aos quais sera anexado o comportamento 
definido no script (mudar a cor de fundo para vermclha). 

Note que o seletor de negagao nao procurou somente os elementos que pos- 
suem o atributo negado. Caso o elemento nao possua o atributo, e considerado 
alvo do seletor. Ao usar o seletor de negagao, e mais seguro raciocinar com a 
selegao complementar da selegao negada. 
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seletor[atributo A =" valor”] 

Acessa todas as ocorrencias do elemento seletor para o qual o valor do atributo 
declarado cm atributo come^a com a string valor. 

Exemplo: 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

S(document).ready(function() { 

$('button').click(function() { 

S('p[title a= "out"]'). cssC'background', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Vermelha</button> 

<h3>Cabe<;alho nivel 3</h3> 

<p>Texto de um paragrafo <b>sem</b> atributo title = "meu_titulo".</p> 

<p title="meu_titulo">Texto de um paragrafo <b>com</b> atributo 
title = "meu_titulo".</p> 

<p lang="pt-br">Texto de um paragrafo com atributo lang.</p> 

<p title="outro_titulo">Texto de um paragrafo com atributo 
title = "outro_titulo".</p> 



[arquivo-2.2.6d.html] 


Ncsse cxcmplo, utilizaram-se um botao para disparar o cvcnto c o sclctor p[title 
a= "out"] para acessar os elementos paragrafo que content o valor do atributo title 
come^ando com a string "out" aos quais sera anexado ocomportamento definido 
no script (mudar a cor de fundo para vermelha). O acesso sera ao paragrafo com 
o atributo title de valor igual a outro.titulo. 


seletor[atributo $=" valor"] 

Acessa todas as ocorrencias do elemento seletor para o qual o valor do atributo 
declarado em atributo termina com a string valor. 

Exemplo: 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 
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$(document).ready(function() { 

$('button').click(function() { 

S('p[title S= "tulo"]'). css('background', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Vermelha</button> 

<h3>Cabe<;alho nivel 3</h3> 

<p>Texto de urn paragrafo <b>sem</b> atributo title = "meu_titulo".</p> 
<p title="meu_titulo">Texto de um paragrafo <b>com</b> atributo 
title = "meu_titulo".</p> 

<p lang="pt-br">Texto de um paragrafo com atributo lang.</p> 

<p title="outro_titulo">Texto de um paragrafo com atributo 
title = "outro_titulo".</p> 



[arquivo-2.2.6e.html] 


Ncssc cxcmplo, utilizaram-se uni botao para disparar o evento c o sclctor p[ti tie 
$= "tulo"] para acessar os elcmentos paragrafo quc content o valor do atributo 
title terminado com a string "tulo" aos quais sera anexado o comportamento 
definido no script (mudar a cor de fundo para vermelha). 


seletor[atributo *= "valor"] 

Acessa todas as ocorrencias do elemento seletor para o qual o valor do atributo 
declarado cm atributo content a string valor. 

Exemplo: 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

S('button').click(function() { 

S('p[title *= "_tit"]'). cssCbackground’, ’red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Vermelha</button> 

<h3>Cabetalho nivel 3</h3> 
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<p>Texto de uni paragrafo <b>sem</b> atributo title = "meu_titulo".</p> 
<p title="meu_titulo">Texto de urn paragrafo <b>com</b> atributo 
title = "meu_titulo".</p> 

<p lang="pt-br">Texto de urn paragrafo com atributo 1ang.</p> 

<p title="outro_titulo">Texto de urn paragrafo com atributo 
title = "outro_titulo".</p> 


[arquivo-2.2.6f.html] 

Nesse exemplo, utilizaram-se uni botao para disparar o evento e o seletor 
p[ti tie *= "_tit"] para acessar os elemcntos paragrafo quc contem no valor do 
atributo title a string_tit aos quais sera anexado o comportamcnto definido no 
script (mudar a cor dc fundo para vermclha). 

seletor[filtrol atributo]... [filtroNatributo] 

Acessa todas as ocorrencias do elemento seletor para as quais os atributos sa- 
tisfazem todas as condi^oes declaradas nos filtros de atributos. Voce pode usar 
quantos filtros quiser. 

Exemplo: 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

SC'button'l.clickffunctionO { 

S('p[titie S= "lo"]tid] , ).css( , background’, ’red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type=”button”>Vermelha</button> 

<h3>Cabe<;alho nivel 3</h3> 

<p>Texto de urn paragrafo <b>sem</b> atributo title = , 'meu_titulo”.</p> 

<p title=”meu_titulo” id="um”> 

Texto de um paragrafo <b>com</b> atributo title = "meu.titulo" e atributo id. 
</p> 

<p lang="pt-br">Texto de um parigrafo com atributo lang.</p> 

<p title="outro_titulo">Texto de um paragrafo com atributo title = "outro_ 
titulo".</p> 



[arquivo-2.2.6g.html] 
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Ncsse cxcmplo, utilizaram-se uni botao para disparar o cvcnto c o sclctor dc 
atributo com filtros p[ti tie &= "lo"] [id] para accssar os clcmcntos paragrafo quc 
contem o atributo title com valor terminado na string "lo" e tambem um atri¬ 
buto id com qualqucr valor aos quais sera anexado o comportamento definido 
no script (mudar a cor de fundo para vermelha). 


2.2.7 Filtros para seletores-filho 

As pseudoclasses para seletores-filho sao previstas nas CSS 3. 


seletoni irst-child 

Acessa o elcmento que e o primeiro filho do elemento definido em seletor. 
Exemplo: 


<script type="text/javasc ript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

S(document).ready(function() { 

$('button').click(function() { 

$('ol li:first-child').css('background\ 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Vermelha</button> 

<ol> 

<li>Item de lista l</li> 

<li>Item de lista 2</li> 

<li>Item de lista 3</li> 

<li>Item de lista 4</li> 

<li>Item de lista 5</li> 

</ol> 



[arquivo-2.2.7a.html] 


Nessc exemplo, utilizaram-se um botao para disparar o cvcnto c o seletor ol 
li: first-chi Id para acessar o elcmento li, primeiro filho da lista ordenada ol, ao 
qual sera anexado o comportamento definido no script (mudar a cor de fundo 
para vermelha). 
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se/efodast-child 

Accssa o elemento quc e o ultimo filho do elcmcnto definido cm seletor. 
Exemplo: 


<script type="text/javascript" src=”../jquery-1.2.6.js"></script> 
<script type="text/javascript"> 

{(document).ready(function() { 

{('button').dick(function() { 

$('ol li:last-child').css(’background', ’red’); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Vermelha</button> 

<ol> 

<li>Item de lista l</li> 

<li>Item de lista 2</li> 

<1i>Item de lista 3</li> 

<li>Item de lista 4</li> 

<li>Item de lista 5</li> 

</ol> 


♦1 [arquivo-2.2.7b.html] 

Ncssc cxcmplo, utilizaram-se um botao para disparar o evento e o sclcror 
ol 1 i: 1 ast-chiId para acessar o elemento li, ultimo filho da lista ordenada ol, ao 
qual sera anexado o comportamento definido no script (mudar a cor de fundo 
para vermelha). 

se/efor:only-child 

Acessa o elemento que e o filho tinico do elemento definido em seletor. 
Exemplo: 

<script type="text/javascript" src«"../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

{(document).ready(function() { 

S('button').click(function() { 
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SC’ol li:only-child').css('background', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Vermelha</button> 

<ol> 

<li>Item de lista l</li> 

<1i>Item de lista 2</li> 

<li>Item de lista 3</1i> 

<li>Item de lista 4</li> 

<li>Item de lista 5</li> 

</ol> 

<ol> 

<li>Item unico de lista</li> 

</ol> 



[arquivo-2.2.7c.html] 


Nesse exemplo, utilizaram-se um botao para disparar o evento e o seletor ol 
li :only-child para acessar o elemento li, filho linico que ocorre na segunda lista 
ordenada ol, ao qual sera anexado o comportamento definido no script (mudar 
a cor de fundo para vermelha). 


seletor.n\k-cW\\A[mdice/even/odd/equa$ao) 

Acessa o elemento que e filho do elemento definido em seletor e ocupa uma 


posi^ao definida conforme mostrado a seguir. 

Argumento Descri^ao 

indice 

Um numero inteiro come^ando com um para acessar o primciro, 
segundo etc. filho. Exemplo: nth-chi 1 d(3). 

even 

Acessa os filhos de ordem par, lembrando que a contagem comc\a 
em 0 (zero) (par por padrao) c assini sao pares os filhos na primeira, 
tcrceira etc. posi^ao. Sintaxe: nth-chiId(even). 

odd 

Acessa os filhos de ordem impar, lembrando que a contagem co- 
meqa em 0 (zero) (par por padrao) e assim sao unpares os filhos na 
segunda, quarta etc. posigao. Sintaxe: nth-child(odd). 

equacao 

Umaexpressaomatematica para acessar determinadaposi<;ao. Exem¬ 
plo: nth-chi ld(3n) acessa os filhos nas posiyocs 3, 6, 9,12 etc. (n e a 
scquencia de numeros naturais). Outro exemplo: nth-child(3n - 2) 
acessa os filhos nas posii,6es 1,4,7,10 etc. 


Material com direitos autorais 



88 


jQuery ■ A Biblioteca do Programador JavaScript 


Exemplo: 

<script type="text/javascript" src*"../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

S(document).ready(function() { 

$('button').click(function() { 

S('ol li:nth-chi 1d(3)’).css('background', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Vermelha</button> 

<ol> 

<li>Item de lista l</li> 

<li>Item de lista 2</li> 

<li>Item de lista 3</li> 

<li>Item de lista 4</li> 

<li>Item de lista 5</li> 

</ol> 


♦1 [arquivo-2.2.7d.html] 

Nessc exemplo, utilizaram-se um botao para disparar o evento e o seletor ol 
1 i:nth-childC3) para acessar o elemento li, que e o tercciro filho na lista ordenada 
ol, ao qual sera anexado o comportamento definido no script (mudar a cor de 
fundo para vermelha). 

2.2.8 Seletores para formularios 

rinput 

Acessa os elementos input, textarea, select e button em um formulario. 

Exemplo: 

<script type="text/javascript” src=". ./jquery-1.2.6. js"x/script> 

<script type="text/javascript"> 

S(document).ready(function() { 

S('button').click(function() { 

$(':input’).css('border', '2px solid #ffOOOO’); 

}); 

}); 

</script> 

</head> 
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<body> 

<button type="button">Bordas nos inputs</button> 

<form action=""> 

<p><1abel>input de texto: <input type="text" /x/labelx/p> 
<pxlabel>input de senha: <input type="password" /x/labelx/p> 
<pxlabe1>input oculto: <input type="hidden" /></labelx/p> 
<pxlabel>input checkbox: <input type=”checkbox" /x/labelx/p> 
<pxlabel>input radio: cinput type="radio” /x/labelx/p> 

<px1abel>input imagem: <input type="iniage" src="ok.gif" /x/labelx/p> 
<pxlabe1>Select: <select> 

<option>0p<;ao l</option> 

<option selected="selected">Op<;ao selecionada</option> 

<option>0p<;ao 3</option> 

<option disabled="disabled">Op<;ao desabilitada</option> 

<option>0p<;ao 4</option> 

<option>0p?ao 5</option> 

</se1 ectx/1 abel ></p> 

<pxlabel>Textarea: <textarea cols="25" rows="8"x/textareax/labelx/p> 
<pxlabe1>input submit: <input type="submit" /x/labelx/p> 
<pxlabe1>input reset: <input type="reset" /x/labelx/p> 

<p><1abel>input botao: <input type="button" /></labe1x/p> 
<pxlabe1>elemento botao: <button>Botao</buttonx/1abelx/p> 

</form> 



[arquivo-2.2.8a.html] 


Ncssc excmplo, utilizaram-sc uni botao para disparar o cvcnto e usamos o 
sclctor :input para accssar os elcmentos input, textarea, select c button do formula- 
rio aos quais sera anexado o comportamento definido no script (adicionar uma 
borda na cor vermelha). 


:text 

Accssa os elcmentos input do tipo text cm um formulario. 
Exemplo: 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript”> 

S(document).ready(function() { 

S('button').click(function() { 

$(':text').css(’border', '2px solid #ffOOOO'); 

}); 

}); 

</script> 

</head> 


Material com direitos autorais 



90 


jQuery ■ A Biblioteca do Programador JavaScript 


<body> 

cbutton type="button">Bordas nos inputs de texto</button> 
cform action=""> 

<p><1abel>input de texto: <input type="text" /></labelx/p> 
<pxlabel>input de senha: cinput type="password" /x/labelx/p> 
<pxlabe1>input checkbox: <input type="checkbox” /x/labelx/p> 
<pxlabel>input submit: cinput type="submit" /></labelx/p> 
<p><1abel>input reset: cinput type*"reset" /x/labelx/p> 
cpx1abel>input botao: cinput type="button" /x/labelx/p> 
c/form> 



[arquivo-2.2.8b.html] 


Nesse exemplo, utilizaram-se um botao para dispararo evento e o seletor :text 
para acessar o clemento input do tipo text no formulario ao qual sera anexado o 
comportamento definido no script (adicionar uma borda na cor vermelha). 


password 

Accssa os elementos input do tipo password cm um formulario. 
Exemplo: 


escript type="text/javascript" src*". ./jquery-1.2.6.js"x/script> 
escript type="text/javascript"> 

$(document).ready(function() { 

$('button').click(functionO { 

$(':password').css('border', '2px solid #ff0000'); 

}): 

}); 

c/script> 

c/head> 

cbody> 

cbutton type="button">Bordas nos inputs de senhac/button> 
cform action=""> 

cp>clabel>input de texto: cinput type="text" />c/label>c/p> 
cp>clabel>input de senha: cinput type="password” />c/label>c/p> 
cp>clabel>input checkbox: cinput type="checkbox" />c/label>c/p> 
cp>clabel>input submit: cinput type="submit" />c/label>c/p> 
cp>clabel>input reset: cinput type="reset" /x/labelx/p> 
cp>clabel>input botao: cinput type="button” />c/label>c/p> 
c/form> 



[arquivo-2.2.8c.html] 
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Ncsse cxcmplo, urilizaram-se uni botao para disparar o evento c o sclctor 
password para accssar o clemcnto input do tipo password no formulario ao qual 
sera anexado o comportamento definido no script (adicionar uma borda na cor 
vermelha). 

:radio 

Acessa os elementos input do tipo radio em uni formulario. 

Exemplo: 


<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

$(document).ready(function() { 

$('button').click(function() { 

$(':radio’).parent().css('border', '2px solid #ffOOOO'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Bordas nos inputs radio</button> 

<form action=""> 

<pxlabel>input de texto: <input type="text" /></labelx/p> 
<pxlabel>input de senha: cinput type="password” /></labelx/p> 
<pxlabel>input checkbox: <input type="checkbox" /></labelx/p> 
<pxlabel>input radio: <input type=”radio" /></labelx/p> 
<pxlabel>input reset: <input type="reset” /x/labelx/p> 
<pxlabel>input botao: <input type="button” /x/labelx/p> 
</form> 



[arquivo-2.2.8d.html] 


Ncssc exemplo, utilizaram-se urn botao para disparar o evento e o seletor :radio 
para acessar o elemento input do tipo radio no formulario ao qual sera anexado o 
comportamento definido no script (adicionar uma borda na cor vermelha). 


V Neste script e no script a seguir, passou-se a estilizagao da borda para o elemento- 
pai parentO porque alguns navegadores, como Firefox 3. nao suportam bordas 
em inputs dos tipos radio e checkbox. 
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checkbox 

Acessa os elementos input do ripo checkbox em um formularia 

Exemplo: 

• • • 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript''> 

$(document).ready(function() { 

$('button').click(function() { 

SC^heckbox'l.parentO.cssC'border', ’2px solid IffOOOO’); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Bordas nos inputs checkbox</button> 

<form action=""> 

<pxlabel>input de texto: <input type="text" /></labelx/p> 
<pxlabel>input de senha: <input type="password" /></labelx/p> 
<pxlabel>input checkbox: <input type="checkbox" /></labelx/p> 
<pxlabel>input radio: <input type="radio" /></labelx/p> 
<pxlabel>input reset: <input type="reset" /x/labelx/p> 
<pxlabel>input botao: <input type="button" /></labelx/p> 

</form> 



[arquivo-2.2.8e.html] 


Nesse exemplo, utilizaram-se um botao para disparar o evento e o seletor 
pai do checkbox existente no formulario ao qual sera anexado o comportamento 
definido no script (adicionar uma borda na cor vermelha). 


submit 

Acessa os elementos input do tipo submit em um formulario. 
Exemplo: 


<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

$(document).ready(function() { 

$('button').click(function() { 

$(':submit').css('border', '2px solid #ffOOOO'); 

}); 

}); 

</script> 
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</head> 

<body> 

cbutton type="button”>Bordas nos inputs submitc/button> 

<form action*""> 

<pxlabel>input de texto: <input type="text" /x/labelx/p> 

<pxlabe1>input de senha: <input type="password" /x/labelx/p> 

<pxlabe1>input checkbox: <input type=”checkbox" /></labelx/p> 

<pxlabe1>input radio: <input type*"radio" /></labelx/p> 

<pxlabe1>input reset: <input type="reset" /x/labelx/p> 

<pxlabe1>input submit: <input type="submit" /></labelx/p> 

<pxlabe1>input botao: <input type="button" /></labelx/p> 

</form> 

^ [arquivo-2.2.8f.html] 

Nesseexemplo,utilizaram-se um botao para disparar oevento eo seletor :submit 
para acessar o elemenro input do tipo submit no formulario ao qual sera anexado o 
comportamento definido no script (adicionar uma borda na cor vermelha). 

: reset 

Acessa os elementos input do tipo reset em um formulario. 

Exemplo: 

<script type="text/javasc ript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('button').click(function() { 

SCireset’J.cssCborder', ’2px solid #ff0000’); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Bordas nos inputs reset</button> 

<form action*""> 

<pxlabel>input de texto: <input type="text" /></labelx/p> 

<pxlabel>input de senha: <input type="password" /></labelx/p> 

<pxlabel>input checkbox: cinput type="checkbox" /x/labelx/p> 

<pxlabel>input radio: cinput type="radio" /x/labelx/p> 

<pxlabel>input reset: cinput type="reset" />c/label>c/p> 
cp>clabel>input submit: cinput type="submit" />c/label>c/p> 
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<pxlabe1>input botao: cinput type="button" /></labelx/p> 
c/form> 



[arquivo-2.2.8g.html] 


Ncssc cxcmplo, urilizaram-sc uni botao para disparar o cvento c o sclctor : reset 
para acessar o elemento input do tipo reset no formulario ao qual sera anexado o 
comportamento definido no script (adicionar uma borda na cor vermelha). 


:image 

Acessa os elementos input do tipo image em um formulario. 

Exemplo: 

<script type="text/javascript” src»". ./jquery-1.2.6. js”x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

SC'button^.clickCfunctionO { 

$(':image').css('border', '2px solid #ff0000'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Bordas nos inputs imagem</button> 

<form action=""> 

<pxlabel>input de texto: cinput type="text" /x/labelx/p> 
<pxlabel>input de senha: cinput type="password" /x/labelx/p> 
cp>clabe1>input checkbox: cinput type=”checkbox" /x/labelx/p> 
cp>clabel>input radio: cinput type="radio" /x/labelx/p> 
cp>clabel>input reset: cinput type="reset" /x/labelx/p> 
cp>clabel>input image: cinput type="image" src="ok.gif" />c/label>c/p> 
cp>clabel>input botao: cinput type="button" />c/label>c/p> 
c/form> 



[arquivo-2-2.8h.html] 


Nessc cxcmplo, utilizaram-se um botao para disparar o evento c o sclctor :image 
para acessar o elemento input do tipo image no formulario ao qual sera anexado o 
comportamento definido no script (adicionar uma borda na cor vermelha). 
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:button 

Acessa os elementos input do tipo button e os clementos button cm urn formularia 
Exemplo: 


<script type="text/javascript" src=”../jquery-1.2.6.js”x/script> 

<scri pt type="text/javasc ript"> 

$(document).ready(function() { 

SC'button'J.clicKfunctionO { 

$(':button').css('border', '2px solid #ffOOOO’); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Bordas nos inputs button</button> 

<form action=""> 

<pxlabel>input de texto: <input type="text" /></labelx/p> 

<pxlabel>input de senha: <input type="password” /x/labelx/p> 

<pxlabel>input checkbox: <input type="checkbox" /></labelx/p> 

<pxlabel>input radio: <input type="radio" /></labe1x/p> 

<pxlabel>input reset: <input type="reset" /x/labelx/p> 

<pxlabel>input submit: dnput type="submit" /></labelx/p> 

<pxlabel>input botao: dnput type="button” /></labelx/p> 

<p>dabel>elemento button: <button> Botao</buttonx/labelx/p> 

</form> 

♦ 1 (arquivo-2.2.8i.html] 

Nesse exemplo, utilizaram-se um botao para disparar o evento e usamos o 
seletor :button para accssar o clemento input do tipo button, bem como o elcmcnto 
button no formulario aos quais sera anexado o comportamento definido no script 
(adicionar uma borda na cor vermelha). 

:file 

Acessa os elementos input do tipo file cm um formulario. 

Exemplo: 


<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

$(document).ready(function() { 
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$('button').click(function() { 

$(':file').css('boder', '2px solid #ff0000'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Bordas nos inputs file</button> 

<form action=""> 

<pxlabel>input de texto: cinput type=”text" /></labelx/p> 
<p><1abel>input de senha: <input type=”password" /></labelx/p> 
<pxlabel>input file: <input type="file" /></labelx/p> 
<pxlabel>input radio: <input type="radio" /></labelx/p> 
<pxlabel>input reset: <input type="reset" /x/labelx/p> 
<pxlabel>input submit: <input type="submit" /></labelx/p> 
<pxlabel>input botao: <input type="button" /></labelx/p> 
<pxlabel>elemento button: <button> Botao</buttonx/labelx/p> 
</form> 



[arquivo-2.2.8j.html] 


Nesse exemplo, utilizaram-se uni botao para disparar o evento e o seletor :file 
para acessar o elemento input do tipo file no formulario ao qual sera anexado o 
comportamento definido no script (adicionar uma borda na cor vermelha). 


V Neste script, passou-se a estilizagao da borda para o elemento-pai pa rent () do 
input tipo file porque alguns navegadores, como Firefox 3, nao suportam bordas 
em inputs do tipo file. 


:hidden 

Acessa os elcmentos input do tipo hidden em um formulario. 
Veja [C2 S2.2..5] - Seletores de visibilidade. 


Para limitar o acesso de qualquer um dos seletores de formulario estudados 
anteriormente a um determinado formulario em uma pagina, use um seletor mais 
especifico. Por exemplo: form#um input:text limita o acesso ao campos de 
texto do formulario com i d="um’. 
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2.2.9 Filtros para formularios 

enabled 

Acessa os elementos que estejam habilitados em um formulario. 

Em HTML, todos os elementos de um formulario estao habilitados por padrao. 
Voce pode desabilitar elementos com o uso do atributo di sabl ed. 

♦ — > 


disabled 

Acessa os elementos que estao desabilitados em um formulario. 
Exemplo: 


<script type="text/javascript" src=". ./jquery-1.2.6. js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$(’button').click(function() { 

$(':disabled').css('border', '2px solid #ff0000'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button”>Bordas nos campos disabled</button> 

<form action=""> 

<pxlabel>input de texto: cinput type="text" disabled="disabled" /></labelx/p> 
<pxlabel>input checkbox: <input type="checkbox" /></labelx/p> 

<p><label>input checkbox: <input type=”checkbox" /></labelx/p> 

<p><label>input checkbox: <input type="checkbox" checked="checked" /></labelx/p> 
<pxlabel>input checkbox: <input type="checkbox" /></labelx/p> 

<pxlabel>input radio: <input type="radio" /x/labelx/p> 

<pxlabel>input radio: <input type="radio" /></labelx/p> 

<pxlabel>Select: <select> 

<option>0p<;ao l</option> 

coption selected="selected">Op<;ao selecionada</option> 

<option>0pgao 3</option> 

coption disabled="disabled">0p<;ao desabilitada</option> 
coption>0p<;ao 4</option> 
coption>0p<;ao 5</option> 

</sel ectx/1 abel x/p> 

<pxlabel>input botao: cinput type="button" disabled="disabled" /x/labelx/p> 
c/form>... 



[arquivo-2.2.9a.html] 
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Ncsse excmplo, utilizaram-se um botao para disparar o evcnto c o selctor : 
disabled para accssar todos os elcmcntos no formulario aos quais sera ancxado o 
comportamento definido no script (adicionar uma borda na cor vermelha). 

checked 

Accssa os clementos radio c checkbox cm um formulario para os quais se tcnha 
declarado o atributo checked. 

Exemplo: 


<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('button').click(function() { 

$(':checked').parent().css('border', '2px solid #ffOOOO'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Bordas nos campos checked</button> 
cform action=""> 

<pxlabel>input de texto: <input type="text" disabled="disabled" /></labelx/p> 
<pxlabel>input checkbox: cinput type="checkbox" /></labelx/p> 

<pxlabel>input checkbox: <input type=”checkbox" /></labelx/p> 

<pxlabel>input checkbox: cinput type="checkbox" checked=”checked" /x/labelx/p> 
<pxlabel>input checkbox: cinput type="checkbox" />c/label>c/p> 
cp>clabel>input radio: cinput type="radio” /x/labelx/p> 
cp>clabel>input radio: cinput type="radio" checked=’’checked" />c/label>c/p> 
c/form> 


♦J [arquivo-2.2.9b.html] 

Nesse excmplo, utilizaram-se um botao para disparar o evento e o selctor : 
checked para acessar todos os elementos no formulario que tcnham o atributo 
checked aos quais sera anexado o comportamento definido no script (adicionar 
uma borda na cor vermelha). 



Neste script, passou-se a estilizagao da borda para o elemento-pai parent() 
dos elementos com atributo checked porque alguns navegadores. como Firefox 
3, nao suportam bordas em elementos com atributo checked. 
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selected 

Acessa os valores que tenham sido selecionados em controles de um formulario. 
Exemplo: 


<style type="text/css" media="a11"> 
b{color:#c30;} 

</style> 

<script type="text/javascript" src=»"../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

J('select').change(functionO { 

$('span').empty(); 

$( 1 option:selected').each(function() { 

$('span').appendCVoce selecionou: <b>' + S(this).text() + ’</bxbr />'); 

}); 

}); 

}); 

</script> 

</head> 

<body> 

<form action="" method=""> 

<pxlabe1>Selecione um estadoxbr /xselect multiple="multiple"> 
<option>Amazonas</option> 

<option>Ac re</option> 

<option>Cea ra</option> 

<option>Espirito Santo</option> 

<option>Coias</option> 

</sel ec tx/1 abel ></p> 

</form> 

<spanx/span> 



[arquivo-2.2.9c.html] 



Para usar um dos metacaracteres empregado na sintaxe dos seletores do tipo 
(: [ ]) em uma string como parte de um nome, escape o caractere com duas 
\\ (barras invertidas). Por exemplo: para acessar um elemento com o seletor de 
atnbuto name, se o valor de name e xp] to, ao definir o seletor. use S (' [name = 
"xp\\[to"]') em lugarde S(' [name = "xp[to"]Melhorainda: eviteusar 
esses metacaracteres em sua marcagSo. 
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CAPITULO 3 

Metodos de 
manipulate) do DOM 


Neste capi'tulo, serao estudadas as funcionalidades dispom'veis em jQuery para 
inspecionar e dcfinir atributos e seus respectivos valores aos clcmcntos compo- 
nentes de uma pagina. 


3.1 Manipula^aode atributos gerais 

seletorjQuery.atir{nome_atributo) 

Acessa o valor do atributo definido no para metro nome.atributo para o primeiro 
elemento encontrado pelo seletorjQuery. Caso nao exista o atributo na marca^ao, 
o valor retornado sera undefined (indeHnido). 

Exemplo: 

<style type="text/css" media="all"> 

#resultado {display:none; width:300px; padding:8px 12px; border:lpx solid #000; 

background:#ff0;} 

</style> 

<script type="text/javascript” src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

1. S(document).ready(function() { 

2. $(’button').click(function() { 

3. var valorAtributo = $('hr).attr('title'); 

4. SCfresultado^.cssCdisplay', 'block') 

.text('0 valor do atributo title e: ' + valorAtributo); 

5. }); 

6 . }); 
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</script> 

</head> 

<body> 

<button type="button">Atributo</button> 

<hl title="logotipo">Cabecalho nivel 1 com atributo title="logotipo"</hl> 
<p id="um">Primeiro paragrafo com atributo id="um ,, </p> 

<p class="diferente">segundo paragrafo com atributo class="diferente"</p> 
<p class*"diferente">segundo paragrafo com atributo class«"diferente"</p> 

<div id="resultado"x/div> 



[arquivo-3.1a.html] 


Nesse exemplo, utilizou-se um botao para disparar o evento. Acompanhe a se- 
guir o funcionamcnto dc cada linha do codigo desenvolvido para estc exemplo. 

Codigo comentado: 

Linha(s) Descri^ao 

Linhas 1 e 6 Container obrigatorio para todo script jQuery. Veja [Cl S 1.1.62]. 

Linha 2 Define uma fun^ao a ser executada quando o usuario clica o botao 
existente na pagina. 

Linha 3 Pega o valor do atributo ti tie do primeiro elemento hi que aparece 

na marcayao e armazena na variavel valorAtributo. 

Linha 4 Seleciona o div#resultado que foi inicialmente escondida corn a re- 
gra CSS #resultado (display:none;} e a torna visivel com o metodo 
jQuery css('display', ’block').Emseguida,usandoo metodo jQuery 
text('0 valor do atributo title e: ' + valorAtributo),escrevedentro 
do div#resultado a frase apresentando o valor do atributo acessado, 
que havia sido armazenado em valorAtributo. 

Veja o funcionamcnto desse script clicando o botao “Atributo” no arquivo 
itidicado, dispomvel no site do livro. 


seletorjQuery.attr({atributo:valor}) 

Accssa o elemento definido em seletorjQuery e inserc o par atributo = "valor" no 
elemento. Voce pode inserir quantos pares quiscr. No exemplo a seguir, inscri- 
ram-se dois pares. 

Exemplo: 

<style type="text/css" media="all"> 
img (display:none;} 

</style> 
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<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

1. S(document).ready(function() { 

2. $('button').c1ick(function() { 

3. SCimg^.cssCdisplay', 'b1ock’).attr({ 

4. src:"maujor.jpg", 

5. alt:"Foto do Maujor" 

6 . }); 

7. }); 

8 . }); 

</script> 

</head> 

<body> 

<img /> 



[arquivo-3.1b.html] 


Ncsse exemplo, utilizou-sc um botao para disparar o cvcnto. Acompanhe a scguir 
o funcionamcnto dc cada linha do codigo desenvolvido para esse exemplo. 

Note que sc inseriu um elemento img vazio no documcnto c cscondeu-sc com 
a dcclara^ao CSS img {display:none;}. 

Codigo comcntado: 

Linha(s) Descri^ao 

Linhas 1 e 7 Container obrigatdrio para todo script jQuery. Veja [Cl Sl.1.6.2]. 

Linha 2 Define uma fun^ao a scr exccutada quando o usuario clica o botao 
existente na pagina. 

Linha 3 Seleciona o(s) elemento(s) i mg existente(s) na pagina (no exemplo, ha 
um elemento) e revela-o com uma declarayao CSS. A seguir, insere 
no elemento os atributos src que definem o caminho para uma 
imagem e o atributo alt que descreve sumariatnente a imagem. 

Veja o funcionamcnto dessc script clicando o botao “Atributo” no arquivo 
indicado, disponivel no site do livro. 


seletorjQuery.atti[atributo, valor) 

Acessa o elemento definido cm seletorjQuery e insere o par atributo = “valor" no 
elemento. Ao contrario do metodo anterior, cste metodo permitc inserir somente 
um par atributo/valor. 

Exemplo: 
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<style type="text/css" media="aH"> 
img {display:none;} 

</sty1e> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

$(document).ready(function() { 

S('button').click(function() { 

S(’img').css(’display', ’block’).attr('src\ 'maujor.jpg'); 

}); 

}); 

</script> 

</head> 

<body> 

<img /> 



[arquivo-3.1c.html] 


Ncssc cxemplo,utilizou-se urn botao para disparar o cvento. O funcionamento 
dcstc script e idcntico ao anterior, mas aqui nao se inscriu o atributo alt. 

Vcja o funcionamento desse script clicando o botao “Atributo” no arquivo 
indicado, disponivel no site do livro. 


seletorjQuery. removeAttr(or/7Mo) 

Acessa o elemento definido em seletorjQuery e remove o atributo definido no pa- 
rametro atributo. 

Exemplo: 


<style type="text/css" media="all"> 

div {width:300px; height:175px; border:lpx solid #000;} 
#remover {background:#0f0;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

S(document).ready(function() { 

S('button').click(function() { 

$(' #remover'). rei»oveAttr(' id'); 

}); 

}); 

</script> 

</head> 
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<body> 

cbutton type="button">Remover</button> 
<div id="remover"x/div> 



[arquivo-3.1d.html] 


Ncsse exemplo, utilizou-se um botao para disparar o evento. Observe que um 
di v com id = "remover" e estilizado com CSS. A cor de fundo verde (#0f0) foi dccla- 
rada em uma regra CSS para o div. Se remover o id do div, a regra CSS perdera o 
efeito. O script faz exatamente isso, remove o id e o div perde o fundo verde. 

Veja o funcionamento desse script clicando o botao “Remover” no arquivo 
indicado, dispom'vel no site do Iivro. 


3.2 Manipulagao do atributo class 


seletorjQuery.adAC\ass[volor_classe) 

Acessa o elemento definido em seletorjQuery e atribui-lhe uma classe de nome 
igual a valor_classe. 



Segundo as especificagdes para a HTML, o atributo class aceita um ou mais 
valores. No caso de mais de um valor, os nomes devem ser separados por 
espago. Exemplo de paragrafo com tres classes diferentes: <p class = "um 
sete outra">. 


Exemplo: 


<style type="text/css" media="all"> 

p.minha_classe {color:#f00; font-size:45px;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

$(document).ready(function() { 

$('button').click(function() { 

S('p').addClass('minha_classe'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Adicionar</button> 

<p>Paragrafo ao qual foi adicionada uma classe com jQuery.</p> 



[arquivo-3.2a.html] 
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Ncsse cxemplo, urilizou-sc um botao para disparar o evcnto. Observe que 
um paragrafo p, sem atributos, nao foi estilizado. Uma regra CSS para paragratos 
com a classe minha_c1asse define cor de texro vermelha e tamanho de fonte 45px. 
Com o uso de jQuery, insere-se a classe minha_dasse no paragrafo e este assume a 
estilizagao constante da regra CSS. 

Veja o funcionamento desse script clicando o botao “Adicionar” no arquivo 
indicado, dispomvel no site do livro. 

seletorjQuery.basC\ass[valor_dasse) 

Acessa o elemento definido cm seletorjQuery e verifica se a classe de valor igual 
a valor_classe existe para tal elemento no documento. Retorna o valor booleano 
TRUE ou FALSE. 


seletorjQuery. re m o veC la ss (valor_ classe) 

Acessa o elemento definido em seletorjQuery e remove a classe cujo valor foi defi¬ 
nido no parametro valor.classe. 

Exemplo: 


<style type="text/css" media="all"> 

p.remover {backgroundborder:lpx solid #000;} 

</style> 

<script type="text/javascript" src»"../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

S(document).ready(function() { 

$C'button')-click(functionO { 

$('p')•removed ass('remover'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Remover</button> 

<p c1ass="remover">Paragrafo com a classe="remover" definida na marca<;ao.</p> 


^ [arquivo-3.2b.html] 
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Ncsse cxemplo, urilizou-sc um botao para disparar o cvcnto. Observe que 
um paragrato p com class = "remover" c estilizado com CSS, que lhc adiciona uma 
cor de fundo amarela e uma borda na cor preta. Se remover essa classe, a regra 
CSS perdera o efeito. O script faz exatamente isso, remove o atriburo classe do 
paragrato e este perde o fundo amarelo e a borda definida pela CSS. 

Veja o funcionamento desse script clicando o botao “Remover" no arquivo 
indicado, dispomvel no site do livro. 

seletorjQuery. tog g leClass( valor_ classe) 

Acessa o elemento definido em seletorjQuery e remove a classe cujo nome foi de- 
fitiido no parametro valor.classe se este estiver presente ou adiciona o valor caso 
nao esteja presente. 

Exemplo: 


<style type="text/css" media="air> 

p.remover {background:#ffO; border:lpx solid #000;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

S(document).ready(function() { 

J('button').click(function() { 

$ (' p'). toggl eO ass (' remover'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Mudar</button> 

<p class="remover">Paragrafo com a classe="remover" definida na marca<;ao.</p> 


[arquivo-3.2c.html] 

Nesse exemplo, utilizou-se um botao para disparar o evento. Aqui cada vez 
que voce clica o botao, a classe do elemento p e alterada e o script entra cm ayao. 
Note que com a classe, o paragrafo recebe uma estilizagao definida nas regras 
de estilo. 

Veja o funcionamento desse script clicando seguidamente o botao “Mudar" 
no arquivo indicado, disponivel no site do livro. 
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3.3 Manipula^ao de conteudos html 

seletorjQueryMtm\() 

Acessa o conteudo html (conteudo e marcayao) dentro do elemento definido em 

seletorjQuery. 

Exemplo: 


<style type="text/css" media="all"> 

span {display:none; background:#ffO; padding:8px 12px; border:lpx solid #000;} 
</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"></script> 

<script type="text/javascript"> 

S(document).ready(function() { 

S('button').click(function() { 

var conteudoHtail = S('p').html (); 

SCspan'l.cssedisplay', 'block').textCconteudoHtml); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">HTML</button> 

<p>Esse e o l<sup>o.</sup> paragrafo para <em>demonstrar</em> o metodo 
<strong>jQuery</strongxcode>html()</code>.</p> 

<p>0utro paragrafo.</p> 

<spanx/span> 



[arquivo-3.3a.html] 


Nesse exemplo, utilizou-se um botao para disparar o evento. Observe que se 
usou o metodo jQuery html() para selecionar a marcagao HTML do primeiro 
paragrafo p que aparece na mareayao. O result ado foi armazenado na variavel 
conteudoHtml c a seguir se cscrevcu o rcsultado em um elemento span que havia 
sido oculto por regras CSS. 

Vcja o funcionamento dcsse script clicando o botao “HTML” no arquivo 
indicado, disponivel no site do livro. 

Note que o elemento span e vazio. Tivemos que oculta-lo com regra CSS por- 
que ele foi estilizado com uma borda e um fundo, fazendo com que estas fossem 
renderizadas, inesmo estando o elemento vazio. 
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seletorjQuery.htm I ( valor) 

Acessa o elemento dcHnido cm seletorjQuery c nclc insere o html (conteiido e mar- 
ca^ao) definido no parametro valor. 

Exemplo: 


<style type="text/css" media="all"> 

p.um {color:#f00; font:24px sans-serif;} 

</sty1e> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(functionO { 

$('button').c1ick(function() { 

SC’div'D.html('<p class="ui«">Conteudo inserido com <code>htm1(<i>valor</i>) 
</code></p>'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">HTML</button> 

<divx/div> 



[arquivo-3.3b.html] 


Nesse exemplo, utilizou-se um botao para disparar o evento. Observe que se 
usou o metodo jQuery html (valor) para inserir um paragrafo p dentro de um div. 
O paragrafo recebeu uma classe que havia sido estilizada por regras CSS. 

Veja o funcionamento dessc script clicando o botao “HTML” no arquivo 
indicado, dispomvcl no site do livro. 


3.4 Manipulate) de textos 

seletorjQuery. text() 

Accssa o conteudo textual do elemento definido em seletorjQuery. 

Exemplo: 

<style type="text/css M media="all"> 

span (display:none; background:#ffO; padding:8px 12px; border:lpx solid #000;} 
</style> 
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<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript”> 

$(document).ready(function() { 

$('button').click(function() { 

var conteudoTextual = SC'P’)•text0; 

S('span').css('display', 'block').text(conteudoTextual); 

}); 

}); 

</script> 

</head> 

<body> 

cbutton type="button">HTML</button> 

<p>Esse e o l<sup>o.</sup> paragrafo para <em>demonstrar</em> o metodo 
<strong>jQuery</strong><code>text()</code>.</p> 

<spanx/span> 



[arquivo-3.4a.html] 


Ncssc exemplo, utilizou-sc um botao para disparar o cvento. Observe que 
se usou o metodo jQuery textO para inspccionar o conteudo html do primeiro 
paragrafo p que aparcce na marca^ao. O rcsulrado foi armazenado na variavcl 
conteudoTextual e a seguir se escreveu o resultado em um elemento span que havia 
sido oculto por regras CSS. 

Veja o funcionamento dcssc script clicando o botao “Texto” no arquivo indi- 
cado, dispom'vcl no site do livro. 


seletorjQuery.texi(valor) 

Acessa o elemento definido em seJetorjQueryc nele inscre o conteudo definido no 
parametro valor. 

Exemplo: 


<style type="text/css" rnedia="all"> 

div {color:#f00; font:24px sans-serif;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type=”text/javascript”> 

$(document).ready(function() { 

$('button').click(function() { 

S('div').text('<p class="un">Conteudo inserido con <code>text(<i>val</i>) 
</codex/p>'); 

}); 
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</script> 

</head> 

<body> 

<button type="button">Texto</button> 
<divx/div> 



[arquivo-3.4b.html] 


Nesse exemplo, utiliza-se um botao para disparar o evento. Observe que se 
usou o metodo jQuery text(va7or) para inserir um paragrafo p dentro de um div. 
O paragrafo recebeu uma classe, um texto marcado com o elemento code e outro 
com o elemento i, mas tudo foi ignorado c inscrido como string, pois o metodo 
jQuery destina-se a inserir texto puro e nao inscrc marca^ao. Para inserir marca- 
£ao, use html( valor) como visto anteriormente. 

Veja o funcionamento desse script clicando o botao “Texto” no arquivo indi- 
cado, dispomvel no site do livro. 


3.5 Manipulate) de valores 

seletorjQuery.va\[) 

Accssa o valor do atributo value do elemento definido cm seletorjQuery. 
Exemplo: 

<script type="text/javasc ri pt"> 

$(document).ready(function() { 

$('button').click(functionC) { 

var valorValue * SC'input'TvalO; 

S('span').text(valorValue); 

}); 

}): 

</script> 

</head> 

<body> 

<button type="button">Valor</buttonxbr /> 

<input type="text" value="Entre um texto qualquer" /xbr /> 
<spanx/span> 



[arquivo-3.5a.html] 
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No cxcmplo, utilizou-se urn botao para disparar o cvento. Observe que se 
usou o metodo jQuery val() para inspccionar o valor do atributo value do cam- 
po de rexto. Definiu-se na marcagao HTML um valor inicial para o atributo. Se 
o usuario entrar com um valor diferente do inicial, o script retera tal valor. O 
script armazena o valor na variavel valorValue e, a seguir, escreve o resultado em 
um elemento span. 

Veja o funcionamento desse script, no arquivo indicado, dispom'vel no site 
do livro, inicialmente clicando o botao “Vidor” existente na pagina. A seguir, 
preencha qualquer texto no campo e clique o botao “Valor” novamente. 


seletorjQuery.y/a\(valor_atributo_value) 

Insere, no elemento definido em seletorjQuery, o atributo value com o valor definido 
pclo parametro valor_atributo_value. 

Exemplo: 


<script type="text/javascript"> 

$(document).ready(function() { 
$('button')>click(function() { 

SCinput'J-valCValor inserido com jQuery’); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Valor</buttonxbr /> 

<input type="text" size="30" /> 



[arquivo-3.5b.html] 


Ncsse exemplo, utilizou-sc um botao para disparar o cvento. Observe que se 
usou o metodo jQuery val (valor) para inserir o texto definido em valor no campo 
input. 


Veja o funcionamento desse script clicando o botao “Valor” no arquivo in¬ 
dicado, dispom'vel no site do livro. 
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3.6 Manipula^ao de conteudos 

seletorjQuery.appendiconteudo) 

Insere o conteudo definido no parametro conteudo logo apos o conteudo do ele- 
mento definido em seletorjQuery. O parametro conteudo pode ser tan to marcagao 
HTMLcomo texto puro. 

Excmplo: 


<script type=”text/javascript"> 

$(document).ready(function() { 

$('button').click(function() { 

S('p').append(' <strong>Aqui texto inserido com jQuery</strong>'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Inserir texto</buttonxbr /> 

<p>Texto dentro do elemento paragrafo.</p> 


[arquivo-3.6a.html] 

Nesse exemplo, utilizou-se urn botao para disparar o evento. Observe que se 
usou o metodo jQuery append (conteiido) para inserir marcagao html e texto definidos 
no parametro conteudo , logo apos o conteudo cxistentc no elemento paragrafo. 

Veja o funcionamento desse script clicando o botao “Inserir com appendO” 
no arquivo indicado, disponivel no site do livro. 

O parametro conteudo desse metodo pode ser marcagao ja existente na arvore 
do documento c, neste caso, duas situagoes sao possrveis: 

■ Primeira situagao: a insergao ocorrera em um so alvo, ou seja, apenas um 
elemento rccebera o conteudo a ser inserido. O exemplo a seguir mostra 
tal situagao, na qual um link ja existente na marcagao sera inserido dentro 
de um paragrafo. 

<script type="text/javascript”> 

$(document).ready(function() { 

$('button').click(function() { 
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$('p’).append($('a')); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Inserir texto</buttonxbr /><br /> 
<a href«"#">Aqui um link</p> 

<p>Texto dentro do elemento paragrafo. </p> 



[arquivo-3.6b.html] 


Como voce podera constatar no arquivo indicado, o script retira o link 
de sua posigao no documento e insere-o apos o conteiido existente no 
paragrafo, ou seja, o conteiido a inserir foi movido de sua posigao para a 
posigao definida em append(). 

■ Segunda situa^ao: a insergao ocorrcra cm mais de um alvo, ou seja, dois ou 
mais elementos receberao o conteiido a ser inserido. O exemplo a seguir 
mostra tal situagao, na qual um link ja existente na marcagao sera inserido 
dentro de tres paragrafos. 


<script type="text/javascr"pt"> 

S(document).ready(function() { 

’S(’button').click(function() { 
•STp’i.appendCSCa')); 

}); 

}); 

</script> 

</head> 

<body> 

•cbutton type="button">Inserir texto</buttonxbr /xbr /> 
<a href="#">Aqui um link</p> 

<p>Texto dentro do elemento paragrafo. </p> 

<p>Texto dentro do elemento paragrafo. </p> 

<p>Texto dentro do elemento paragrafo. </p> 



[arquivo-3.6c.html] 


Como voce podera constatar no arquivo indicado, o script faz copias do link 
e inscre-as apos o conteiido de cada um dos tres paragrafos, ou seja, o conteii¬ 
do a inserir permanece cm sua posigao inicial, sendo copiado para as posigoes 
definidas em append Q. 
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Mover ecopiar 

Como se mostrou nos dois arquivos anteriores, o metodo jQuery append (),quando 
toma como parametro marcagao prcviamentc cxistente no documento, comporta- 
se de maneiras distintas. Se o alvo de appendO e unico no documento, a marca^ao 
tomada como parametro e movida de seu lugar no documento para a posi^ao 
onde sera inserida. Se o alvo de appendO e multiplo, sao feitas copias da marca^ao 
para as inser^oes e a marcayao original permanece em seu lugar. 


seletorjQuery.a\)jpend]o[alvo) 

Insere o conteudo definido no seletorjQuery logo apos o conteudo do elemento 
definido no parametro alvo. Este metodo cumpre as mesmas finalidades do me¬ 
todo appendO cstudado no item anterior, usando uma sintaxe variante a sintaxc 
desse metodo. 

Exemplo: 


<script type="text/javasc ript"> 

$(document).ready(function() { 

$('button')-c1ick(function0 { 

$('<strong>Aqui texto inserido com jQuery</strong> , )-appendTo('p'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Inserir com appendTo()</buttonxbr /> 

<p>Texto dentro do elemento paragrafo.</p> 



[arquivo-3.6d.html] 



Tal comoestudado para o metodo appendO, este metodo tambem admite insergao 
de conteudos jd existentes na £rvore do documento e as duas situagdes estudadas 
para aquele metodo sao validas para este, ou seja, havendo urn alvo, o elemento 
e movido; havendo dois ou mais alvos, o conteudo movido e copia do original. 
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seletorjQuery.prepend(conteudo) 

seletorjQuery.prependloialvo) 

Estes dois metodos sao equivalentes aos metodos append() e appendToO, com a 
diferenga de que a insergao do conteudo se faz antes do conteudo que recebera 
a insergao. 


seletorjQuery.dfXer{conteudo) 

seletorjQuery.\nsertM\er(alvo) 

Estes dois metodos sao equivalentes aos metodos appendO e appendToO, com a 
diferenga de que a insergao do conteudo se faz antes do elemento (e nao do 
conteudo do elemento) que recebera a insergao. Veja o mesmo exemplo mos- 
trado para appendO - arquivo-3.6a.html) - alterando o metodo para afterO, com a 
finalidade de caracterizar a diferenga. Compare o arquivo desse exemplo com 
o arquivo-3.6a.html. 

Exemplo: 


<script type="text/javascript"> 

$(document).ready(function() { 

$('button').c1ick(function() { 

S('p').after('<strong>Aqui texto inserido co« jQuery</strong>'): 

}); 

}); 

</script> 

</head> 

<body> 

<button type=”button">Inserir com after()</buttonxbr /> 

<p>Texto dentro do elemento paragrafo.</p> 



[arquivo-3.6e.html] 


Conforme se pode constatar nos dois arquivos (arquivo-3.6a.html e arquivo-3.6e. 
html), o metodo appendO coloca a marcagao do elemento span em linha com a do 
paragrafo, ficando claro que foi inserida dentro do paragrafo, e o metodo afterO 
causa rcndcrizagao da marcagao span embaixo, indicando que foi inserida fora 
do paragrafo. 

Para esses dois metodos, sao validos os criterios de mover e copiar, como 
descritos para os metodos appendO e appendToO. 
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seletorjQuery.belore(conteudo) 

seletorjQuery.\nsertftefore(alvo) 

Estes dois metodos sao equivalentes aos metodos anteriores, com a diferenga de 
que o conteudo e inserido antes do alva 

Para esses dois metodos, sao validos os criterios de mover e copiar, como 
descritos para os metodos appendO e appendToQ. 


seletorjQuery.wrapihtmf) 

Cria o container definido no parametro html para cada um dos elementos defi- 
nidos cm seletorjQuery. 

Exemplo: 


.container {border:lpx solid #000; background:#ffc; margin:20px 0;} 
</style> 

<script type="text/javascript"> 

$(document).ready(function() { 

S('button').click(function() { 

S('p').wrap('<div class="container"x/div>'); 

}); 

}); 

</script> 

</head> 

<body> 

cbutton type="button">Definir container</button><br /> 

<p>Texto dentro do elemento paragrafo.</p> 

<p>Texto dentro do elemento paragrafo.</p> 

<p>Texto dentro do elemento paragrafo.</p> 



[arquivo-3.6f.html] 


Nesse exemplo, utilizou-se um botao para disparar o evento. Observe que a 
marcagao passada pelo parametro do metodo e um div com class = "container" 
que sera inserida na marcagao como um container para cada um dos paragrafos. 
Para facilitar a visualizagao do funcionamcnto do script, definiu-sc uma rcgra 
CSS para a classe .container. Veja o funcionamcnto dessc script clicando o botao 
“Definir container” no arquivo indicado, dispomvel no site do livro. 
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seletorjQuery.wap(elemento) 

O parametro elemento e um container para os elementos definidos cm seletorjQuery, 
mas cm vez de ser escrito no metodo, e escrito com JavaScript. 



0 container defmido deve ser um elemento vazio, isto 6, nao pode haver conteudos 
dentro dele. 


Exemplo: 


div {border:lpx solid #000; backgroundmargin:20px 0;} 
</style> 

<script type="text/javasc ript"> 

$(document).ready(function() { 
$('button').click(function() { 

$('p').wrap(document.createElement('div')); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Definir container</button><br /> 
<p>Texto dentro do elemento paragrafo.</p> 



[arquivo-3.6g.html] 


Nesse exemplo, utilizou-se um botao para disparar o evento. Observe que o 
container e um div criado com o metodo document. createEl ement ('div'). Para facili- 
tar a visualizagao do funcionamento do script, definiu-se uma regra CSS para o 
div. Veja o funcionamento desse script clicando o botao “Definir container” no 
arquivo indicado, disponivel no site do livro. 


seletorjQuery.vmpM\{html) 

Cria o container definido no parametro html, para todos os elementos definidos 
em seletorjQuery. A diferenga para vvrap (html) e que naquele metodo o container e 
para cada um dos elementos e neste, para todos. 
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Exemplo: 


.container {border:lpx solid #000; background:#ffc; margin:20px 0;} 
</style> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('button').click(function() { 

$(' p').wrapAl 1 (' <div class="container"x/div> ’); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Definir container</button><br /> 

<p>Texto dentro do elemento paragrafo.</p> 

<p>Texto dentro do elemento paragrafo.</p> 

<p>Texto dentro do elemento paragrafo.</p> 



[arquivo-3.6h.html] 


Ncssc cxcmplo, utilizou-se um botao para disparar o cvcnto. Observe que a 
marcagao passada pelo para metro do metodo e um div com class = "container" 
que sera inscrido na marca^ao como um container para todos os paragrafos. 
Para facilitar a visualiza^ao do funcionamento do script, definiu-se uma regra 
CSS para a ciasse .container. Veja o funcionamento desse script dicando o botao 
“Definir container” no arquivo indicado, dispomvel no site do livro. 

O uso desse metodo causa uma altera^ao substancial na arvore do documento. 
No exemplo mostrado, os tres paragrafos estao em sequencia. Considere um 
exemplo mais complexo com varios paragrafos em uma pagina, intercalados por 
outros elementos. Esse metodo cria o container e “puxa” todos os paragrafos para 
uma posigao imediatamente apos o primeiro paragrafo encontrado pelo seletor, 
colocando todos no container. Dai e facil concluir a alteragao no DOM. 


seletorjQuery.wra p AI \[elemento) 

Estc metodo e semelhante ao metodo wrap(eJemento), com a diferen^a dc que o 
container e para todos os elementos-alvo. 
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seletorjQuery.wra[i\mer(html) 

Cria o container dcfinido no parametro html para os conteudos (nao para os 
elemcntos) de cada um dos elementos definidos cm seletorjQuery. 


seletorjQuery.yNrap\mer{elemento) 

Apresenta o mesmo efeito do anterior, mas neste metodo o container e criado 
com JavaScript. 

seletorjQuery.remove(filtro) 

Este metodo remove todas as ocorrencias do elemento definido em seletorjQuery. 
O parametro filtroe opcional e pode ser usado para filtrar ocorrencias espedficas 
da remo^ao. 

Exemplo: 


</style> 

<script type="text/javascript"> 

$(document).ready(function() { 

SCbutton^.clickCfunctionO { 

J('p').rei»ove(' .remover'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Remover</buttonxbr /> 

<p>Texto dentro do elemento paragrafo.</p> 

<p class="remover">Texto dentro do elemento paragrafo com dasse remover.</p> 
<p>Texto dentro do elemento paragrafo.</p> 



[arquivo-3.6i.html] 


Nesse exemplo, utilizou-se um botao para disparar o evento. Observe que 
o metodo remove todos os paragrafos do documento cujo atributo classe tern 
o valor remover. O metodo remove o elemento do DOM. Veja o funcionamento 
desse script clicando o botao “Remover” no arquivo indicado, disponivel no site 
do livro. 
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seletorjQuery.emp\y() 

Estc mctodo remove todos os conteudos do elemento definido em seletorjQuery. 
Funciona como o mctodo anterior, removendo conteudos, sem remover o elemento. 
As tags de abertura e fechamento do elemento, permanecem no DOM. 

Exemplo de sintaxe: 

$( *p') .emptyO; 

seletorjQuery.rep\aceW\i\][conteudo) 

Substitui o elemento definido no seletorjQuery por aquele definido no parametro 
conteudo. Este parametro pode ser marca^ao H TML (como mostrado no exemplo) 
ou elemento c seus conteudos criados com JavaScript. 

Exemplo: 


<script type="text/javasc ript"> 

S(document).ready(function() { 

$('button').c1ick(function() { 

$('p') replaceWith('<hl>Cabe<;alho substitui paragrafo</hl>'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Substituir</buttonxbr /> 

<p>Texto dentro do elemento paragrafo.</p> 



[arquivo-3.6j.html! 


Veja o funcionamento desse script clicando o botao “Substituir” no arquivo 
indicado, dispomvel no site do livro. 


conteudoAep\aceM\(seletorjQuery) 

Este mctodo cumpre a mesma finalidade do anterior com uma sintaxe reversa, 
ou seja, substitui o sclctor definido cm seletorjQuery pclo parametro conteudo, que 
pode ser marca^ao HTMLou elemento e conteudos criados com JavaScript. 
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O exemplo a scguir faz o mcsmo cfcito daquclc mostrado no cxemplo do 
arquivo anterior (arquivo-3.6j.html). 

$('<hl>Cabe<;alho substitui paragrafoc/hiyj.replaceAllCp'); 


seletorjQuery x\one[) 

Cria uma copia do seletorjQuery. 
Exemplo: 


<style type="text/css" rredia="all"> 

div {border:lpx solid #000; background:#ffc;> 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

$(document).ready(function() { 

$('button').click(function() { 

$('p') .cloneO.appendTo('div'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Clonar</buttonxbr /> 

<p>Paragrafo a clonar.</p> 

<div>div para receber o clone</div>... 



[arquivo-3.6k.html] 


Veja o funcionamento desse script dicando o botao “Clone” no arquivo 
indicado, dispomvel no site do livro. 


seletorjQuery.c\one(Xrue) 

Identico ao anterior, cria uma copia do seletorjQuery e de todos os scripts a ele 
anexados. 
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CAPI'TULO 4 

CSS e inspe^ao do DOM 


Neste capitulo, scrao cstudadas as funcionalidades disponivcis cm jQuery para 
definir estiliza^ao aos elementos componentes da arvore do documenraTambem 
se abordarao os metodos para acessar c sclecionar componentes do DOM. 



Nos titulos de cada item usamos o termo seletorjQuery. genericamente, para 
indicar um seletor, um metodo de selegao ou a selepao resultante de um 
encadeamento. 


4.1 Estiliza^ao geral 

seletorjQuery.css(propriedade) 

Accssa o valor definido para a propriedadc CSS do elemento seletorjQuery. A pro- 
priedade a acessar deve ser declarada no parametro propriedade. 

Exemplo: 

<style type="text/css" media="al1"> 

div {width:100px; height:lOOpx; margin:20px 0; border:lpx solid #000; background:#ffc;} 
</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

S(document).ready(function() { 

$(’button').click(function() { 

var corFundo = S('div').css('backgroundColor'); // ver dica apos o script 
SCspan^.textCA cor de fundo do div e: ' + corFundo); 

}); 

}); 

</script> 
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</head> 

<body> 

<button type="button">CSS</buttonxbr /> 
<div>DIV estilizado com CSS</div> 
<spanx/span> 


♦1 [arquivo-4.1a.html] 



Propriedades CSS com nomes compostos de duas palavras cuja sintaxe CSS 
adota separagao com hifen, tais como background-col or e 1 i ne-hei gh t. devem 
ser escritas em sintaxe jQuery com a notagao conhedda como “camelCase", ou 
seja. backgroundColor e lineHeight seguindo a sintaxe formal JavaScript. 


Nesse exemplo, utilizou-se uni botao para disparar o evento. Observe c]ue se 
acessou o valor da propriedade CSS background-color para o div e armazcnou-se 
esse valorem uma variavel denominada corFundo. A seguir,escreveu-se o resultado 
em um clcmento span cxistente na marca^ao. Veja o funcionamento dcsse script 
clicando o botao “CSS” no arquivo indicado, disponivel no site do livro. 


seletorjQueryxssCpropriedade','valod) 

Estiliza o elemento seletorjQuery com a declarafao CSS defmida nos parametros 
propriedade, valor. Propriedade e a propriedade CSS a estilizar e valor, seu valor ou 
caracteristica. 

Exemplo: 


<scri pt type="text/javasc ri pt" src="../jquery-1.2.6. js"x/scri pt> 
<script type="text/javasc ript"> 

$(document).ready(functionC) { 

$('button').click(function() { 

SCdiv'J.cssC'border', 'lpx solid red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Estilizar</buttonxbr /> 

<div>DIV estilizado com regra CSS dedarada por jQuery</div> 



[arquivo-4.1b.html] 
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Vcja o funcionamento dcssc script clicando o botao “Estilizar” no arquivo 
indicado, dispom'vcl no site do livro. 


seletorjQuery.css({propriedade: 'valor', propriedade: 'valor ',...}) 

Estiliza o elemento seletorjQuery com as declaragoes CSS definidas no parametro 
propriedade: valor. A diferenga para a anterior c que com este metodo se pode definir 
duas ou mais declara^oes CSS. 

Exemplo: 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

S('button').click(functionC) { 

S('div') .css(-{ 
width:'400px', 

lineHeight:'60px', // camelCase para lineHeight 

background:'#ffO', 
border:'lpx dotted #000 

}); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Esti1izar</buttonxbr /> 

<div>DIV estilizado com regra CSS declarada por jQuery</div> 



[arquivo-4.1c.html] 


Veja o funcionamento desse script clicando o botao “Estilizar” no arquivo 
indicado, dispomvel no site do livro. 


4.2 Posicionamento 


seletorjQuery. offset!) 

Acessa o valor das coordenadas CSS top e left do elemento seletorjQuery cm rela^ao 
a viewport. 

Exemplo: 
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<style type="text/css M media="all"> 

div {width:100px; height:lOOpx; background:#OfO; margin:50px 0 0 lOOpx;> 
</sty1e> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('button').click(function() { 

var coordenadasDiv = S('div').offset(); 

SCspan'l.html (’As coordenadas do div sao:<br /> left: ' + 

coordenadasDiv.left + ' px<br /> top: ' + coordenadasDiv.top +' px’); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Coordenadas</buttonxbr /> 

<div>DIV para determinar as coordenadas</div> 

<spanx/span> 



[arquivo-4.2a.html] 


Nesse exemplo, utilizou-se um botao para disparar o evento. Observe que se 
accssaram os valorcs das coordenadas, os quais sc armazenaram cm uma variavel 
denominada coordenadasDiv. A seguir,escreveu-se o resultado em um elemento span 
existente na marcagao. 

Veja o funcionamento dcssc script clicando o botao “Coordenadas” no arquivo 
indicado, disponivel no site do livro. 


seletorjQuery. pos\t\on[) 

Accssa o valor das coordenadas CSS top c left do elemento seletorjQuery cm rela^ao 
ao offset do elemento-pai. 

Exemplo: 

<style type="text/css" media="all"> 
div { 

width:300px; 
height:200px; 
background:#OfO; 
margin:50px 0 0 lOOpx; 

} 


Material com direitos autorais 



Capitulo 4 ■ CSS e inspe^ao do DOM 


127 


p {background:red;} 

</style> 

<script type="text/javascript" src=". ./jquery-1.2.6. js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('button').c1ick(functionO { 

var coordenadasPara = S('p:eq(2) , ).position(); 

S('span').html(’As coordenadas do 3o. paragrafo saoxbr /> left: ' + 
coordenadasPara.left + ' pxcbr /> top: '+ coordenadasPara.top +' px'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Coordenadas</button><br /> 

<div>DIV para determinar as coordenadas</div> 

<span></span> 



[arquivo-4.2b.html] 


Nesse exemplo, utilizou-se um botao para disparar o evento. Observe que se 
acessaram os valores das coordenadas do terceiro paragrafo, os quais se arma- 
zenaram em uma variavel denominada coordenadasPara. A seguir, escreveu-se o 
resultado em um elemento span existente na marca^aa 

Veja o funcionamento desse script clicando o botao “Coordenadas” no arquivo 
indicado, dispomvel no site do livro. 



Coordenadas de posicionamento de um elemento em relacao a seu ancestral 
dependem do contexto CSS de posicionamento. No exemplo desenvoh/ido, tanto o 
elemento-pai como o elemento-filho nao foram posicionados com declaragao CSS, 
assim o contexto de posicionamento para ambos e a viewport e as coordenadas 
a ela serao referenciadas. 


Note que, ao exccutar o script do exemplo, a coordenada left para o paragrafo 
e igual a coordenada left para o div e a coordenada top e igual a do div mais um 
valor igual a distancia do topo do paragrafo ao topo do div. 

A melhor maneira de entender o funcionamento desse metodo e fazer algu- 
mas copias do arquivo de exemplo c nelas alterar o posicionamento do div c do 
paragrafo com regras CSS (use regras CSS in-line para simplificar). Execute o 
script em cada situa^ao criada para ver o resultado. Comece declarando position: 
relative para o div e position:absolute; top:0; left:0 para o paragrafo. 
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seletorjQuerysaoW\op{) 

Acessa o valor da coordenada top que mede a distancia cm pixel de tima rolagem 
vertical. 

Exemplo: 


<style type="text/css" media="all"> 
div { 

width:400px; 
height:250px; 
border:lpx dotted #000; 
margin:20px 0; 
padding:5px lOpx; 
background:#d6e2e5; 
overflow:scroll; 

} 

p {width:600px;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

1. S(document).ready(function() { 

2. $('button:eq(0)').click(function() { 

3. var rolagemVertical = S('#rolagent').scrollTopO; 

4. var rolagemHorizontal = S(’#ro1agem').scronLeft(); 

5. S('span').html (’Posi<;ao da rolagem vertical: ’ + rolagemVertical + 

' px<br />Posi<;ao da rolagem horizontal: ' + rolagemHorizontal + ’ px’); 

6 . }); 

7. $('button:eq(l)').click(function() { 

8. $('#rolagem').scrollTop(0); 

9. SCfrolagenO.scrollLeftCO); 

10. $('span').empty(); 

11 . }); 

12 }); 

</script> 

</head> 

<body> 

<p>Role as barras para qualquer posicao e clique o botao <strong>Coordenadas scroll 
</strong></p> 

<button type="button">Coordenadas scroll</button>&nbsp;&nbsp;&nbsp; 

<button type="reset">Reset</buttonxbr /> 

<div id="rolagem"> 

<p>Lorem ipsum 
..muito conteudo.. 

</div> 

<spanx/span> 

</body> 

</html 



[arquivo-4.2c.html! 
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Acompanhe a seguir o funcionamento de cada linha do codigo dcscnvolvido 
para esse cxcmplo. 

Codigo comentado: 

Linha(s) Descriqao 

Linhas 1 e 12 

Container obrigatorio para todo script jQuery. Veja [Cl 
S 1.1.6.21. 

I.inha 2 

Define uma fungao a ser executada quando o usuario clica o 
primeiro botao denominado Coordenadas scroll. 

Linha 3 

Armazena, na variavel rolagemVertical , a coordenada vertical da 
barra dc rolagem, usando o metodo scrollTop(). 

Linha 4 

Idem para a coordenada horizontal. 

Linha 5 

Escreve dentro do clemento span o resultado das coordenadas 
da posi^ao atual das barras dc rolagem vertical c horizontal. 

Linha 7 

Define uma fun^ao a ser executada quando o usuario clica o 
segundo botao denominado Reset. 

Linhas 8 e 9 

Define para ambas as coordenadas da barra de rolagem o valor 
0 (zero). 

Linhas 10 

Retira da tela o resultado das coordenadas inseridoantcriomente 
dentro do clemento span. 


seletorjQuery. scrollLeftO 

Funciona de modo idencico ao metodo scrollTop estudado anteriormente, retor- 
nando a posi^ao da barra dc rolagem horizontal. O arquivo-4.2c.html do cxcmplo 
anterior demonstra o funcionamento deste metodo. 

seletorjQuery.saoW\op(valor) 

Fste metodo, quando definido com o parametro valor , permite movimentar a barra 
de rolagem vertical para a posi^ao indicada cm valor. O parametro e um numero 
inteiro e a unidade de medida de valor e o pixel. O arquivo-4.2c.html do exemplo 
anterior demonstra o funcionamento deste metodo, quando se executa a fun< t ao 
disparada pelo botao “Reset” quc define o valor para scrollTop igual a 0 (zero). 

seletorjQuery.sao\\lef\[valor) 

Este metodo, quando definido com o parametro valor, permite movimentar a 
barra de rolagem horizontal para a posi^ao indicada em valor. O parametro e um 
numero inteiro c a unidade de medida de valor e o pixel. O arquivo-4.2c.html do 
exemplo anterior demonstra o funcionamento deste metodo, quando se executa 
a fun^ao disparada pelo botao “Reset” que define o valor para scroll Left igual a 
0 (zero). 
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4.3 Larguraealtura 

seletorjQuery.vt'uM\() 

Acessa o valor da largura do elemento seletorjQuery e retorna o resultado em 
unidade pixel mcsmo quc tal largura tenha sido definida cm rcgra CSS com 
outra unidade. O valor retornado nao inclui as espessuras de padding nem margin 
porventura existentes. 

No cxemplo a scguir, a largura do elemento paragrafo foi definida em 20em. 
Observe, no arquivo que ilustra o exemplo, como o resultado e retornado em 
pixel. Sabe-se quc por padrao lem = 16px, logo 20em devera retornar 320px. 

Experimente aumentar o tamanho da fonte no navegador e rodar o script. 

Exemplo: 


<style type="text/css M media="aH"> 

div, p {height:50px; background:#0f0; padding:0 20px;} 
div {width:275px;} 
p {width:20em;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('button').c1ick(function() { 

var larguraDiv = $('div').vridth(); 

SCdiv'J.afterC’A largura do div e de: ' + larguraDiv + ' px'); 
var larguraPara = J('p').width(); 

$('p’).after('A largura do paragrafo e de: ' + larguraPara + ' px'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Larguras</buttonxbr /> 

<div>DIV para determinar a largura.</divxbr /> 

<p>Texto de urn paragrafo para determinate da largura.</p> 



[arquivo-4.3a.html] 


Nesse exemplo, utilizou-se um botao para disparar o evento. Observe que se 
accssaram os valores das larguras do div e do p, os quais sc armazenaram em duas 
variaveis denominadas larguraDive larguraPara respectivamente. A seguir,escreveu-se 
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o resultado usando o comado after() [C3 S3.6) para inscrgao dc contetidos. Vcja 
o funcionamcnto dcssc script clicando o botao “Larguras” no arquivo indicado, 
dispom'vel no site do livro. 


£ certo afirmar que o script desenvolvido neste exemplo, assim como em muitos 
dos exemplos puramente demonstratives dos m&odos jQuery, n3o 6 a melhor 
solupao pratica. Contudo, cumpre a finalidade do script, ou seja, demonstrar o 
funcionamento do metodo. Na segunda parte do livro, quando se estudarem scripts 
de aplicagao pratica, serao desenvolvidas solugoes otimizadas. 


seletorjQuery.Vi\Ax\\(valor) 

Define o valor, em pixel, da propriedade CSS width para o elemento seletorjQuery. 
Isto c, define uma largura para os clcmcntos-alvo do scletor. 

Exemplo: 


<style type="text/css" media="all"> 

div, p {height:50px; background:#0f0; padding:0 20px;} 
</sty1e> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript”> 

$(document).ready(function() { 

S('button').c1ick(function() { 

S('div').width(350); 

$('p’).width(200); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Larguras</buttonxbr /> 

<div>DIV para definir a largura.</divxbr /> 

<p>Texto de urn paragrafo para definir a largura.</p> 



[arquivo-4.3b.html] 


Ncsse exemplo, utilizou-se um botao para disparar o evento. Observe que as 
larguras do div e do p nao foram definidas por regras CSS e assumem o valor- 
padrao que e igual ao valor da largura do elemento-pai, ncsse caso a largura da 
janela. Definiram-se, com o metodo jQuery width(valor), as larguras de 350px e 
200px, respectivamente, para o div e o p. Veja o funcionamento desse script clicando 
o botao “Larguras” no arquivo indicado, dispom'vel no site do livro. 
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seletorjQuery.he\qht[) 

Acessa o valor da altura do elemento seletorjQuery c retorna o resultado cm unidade 
pixel mesmo que tal altura tenha sido dcfinida cm rcgra CSS com outra unidade. 
No exemplo a seguir, a altura do elemento paragrafo foi definida em 4em. Ob¬ 
serve, no arquivo que ilustra o exemplo, como o resultado e retornado em pixel. 
Sabe-se que por padrao lem = 16px, logo 4em devera retornar 64px. 

Experimente aumentar o tamanho da fonte no navegador e rodar o script. 

Exemplo: 


<style type="text/css" media="all"> 
div, p {width:50%; background:#0f0;} 
div {height:38px;} 
p {height:4em;} 

</style> 

<script type="text/javascript" src=”../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('button').click(function() { 

var alturaDiv = S('div').height(); 

$('div').after(’A altura do div e de: ' + alturaDiv + ' px'); 
var alturaPara = $('p') .heightO; 

SCp'J.afterCA altura do paragrafo e de: ' + alturaPara + ' px'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Alturas</buttonxbr /> 

<div>DIV para determinar a altura.</divxbr /> 

<p>Texto de um paragrafo para determinacao da altura.</p> 



[arquivo-4.3c.html] 


Nesse exemplo, utilizou-se um botao para disparar o evento. Observe que se 
acessa ram os valores das alturas do div e do p, os quais se armazenaram em duas 
variavcis denominadas alturaDiv c alturaPara rcspcctivamcntc. A seguir, cscrcvcu-se 
o resultado usando o comado after() [C3 S3.6] para inser^ao de conteudos. Veja 
o funcionamento desse script clicando o botao “Alturas” no arquivo indicado, 
disponivel no site do livro. 
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seletorjQuery. h e i g h t [valor) 

Define o valor, cm pixel, da propriedade CSS height para o elemento seletorjQuery, 
isto e, define uma altura para os elementos-alvo do seletor. 

Exemplo: 


<style type="text/css" media="all"> 
div, p {width:50%; background:#0f0;} 

</sty1e> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

$(document).ready(function() { 

$('button').c1ick(function() { 

S('div'). height (70); 

S('p').height (100); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Alturas</button><br /> 

<div>DIV para definir a altura.</divxbr /> 

<p>Texto de uma paragrafo para definir a altura.</p> 



[arquivo-4.3d.html] 


Nesse exemplo, utilizou-se urn botao para disparar o evento. Observe que as 
alturas do div e do p nao foram definidas por regras CSS c assumcm o valor-pa- 
drao auto, que c igual ao valor nccessario para circunscrever o conteudo inserido 
no elemento. Definiram-se, com o metodo jQuery height(vaJor), as larguras de 
70px e lOOpx, respectivamente, para o div e o p. Veja o funcionamento desse script 
clicando o botao “Alturas” no arquivo indicado, dispomvel no site do livro. 


seletorjQuery.outerW\dlh([booleano]) 

Acessa o valor da largura do elemento seletorjQuery computando os valores dos 
paddings e das bordas horizontal e retorna o resultado em unidade pixel mesmo 
que as definiyoes de largura e/ou padding ten ham sido definidas em regra CSS 
com outra unidade. No exemplo a seguir, a largura do elemento div foi definida 
em 275px e o padding esquerdo e direito, 20px, totalizando um padding de 40px. 
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Observe no arquivo que i lustra o cxcmplo como o result ado retornado para a 
largura do di v c dc: 275px + 40px = 315px. 

Para o paragrafo, o valor retornado e de: 20em x 16px + 40px = 360px. 

O parametro booleano pode ser declarado true ou false. O valor-padrao (quan- 
do nao se declara) e false. Quando declarado como true, o resultado retornado 
para a largura do elemento inclui tambem o valor das margens horizontais, se 
existentes. 

Exemplo: 


<style type="text/css M media="all"> 

div, p {height:50px; background:#OfO; padding:0 20px;} 
div {width:275px;} 
p {ridth:20em;} 

</style> 

<script type="text/javascript" src«"../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

S('button').click(function() { 

var larguraDiv = $('div').outerWidth(); 

SC'div’J.afterC'A largura do div (incluindo o padding mais as bordas 
horizontais) e de: ' + larguraDiv + ’ px'); 
var larguraPara = $('p').outerWidth(); 

S('p').after('A largura do paragrafo(induindo o padding lateral) e de: 1 
+ larguraPara + ' px'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Larguras</buttonxbr /> 

<div>DIV para determinate da largura + padding + borda.</divxbr /> 

<p>Texto de um paragrafo para determinate da largura + padding.</p> 



[arquivo-4.3e.html] 


Nesse exemplo, utilizou-se um botao para disparar o evento. Observe que se 
acessaram os valores das larguras do di v e do p, os quais se armazenaram cm duas 
variaveisdenominadas larguraDiv e larguraPara respectivamente. A seguir, escreveu-se 
o resultado usando o comado after() [C3 S3.6] para insergao de conteudos. Veja 
o funcionamento desse script clicando o botao “Larguras” no arquivo indicado, 
dispomvel no site do livro. 
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seletorjQuery.ouierHe\q\\t([booleano]) 

Acessa o valor da altura do elemento e funciona de maneira identica ao metodo 
outerWidth() explicado anteriormcntc. 

seletorjQuery. innerWidth() 

Acessa o valor da largura do elemento incluindo o valor de padding horizontal 

s eleto rjQu ery . i n n e r H e i g h t () 

Acessa o valor da altura do elemento incluindo o valor do padding horizontal. 


Figura ilustrativa 

Observe, na figura 4.1, um diagrama do Box Model CSS esdarecendo os valores 
de offset e as larguras retornadas pelos metodos estudados anteriormcntc. 


*-) Mo/illa Fircfon 


InncfWidthO 
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libero id nui a Du 13 posuere odio sed veld vulputate 
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margem 


borda 

warn 

padding 


conteudo 


Figura 4.1 - Metodos dimensionais. 

Os valores no sentido vertical, nao mostrados na figura 4.1, sao retornados de 
maneira semelhante pelos metodos para altura. 
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Os metodos dimensionais foram incluidos na biblioteca a partir da versao 
jquery-1.2.6. Em versoes anteriores, para pleno suporte a estes metodos. e 
rtecessario a instalagao de urn plug-in denominado dimensions.js. 


4.4 lnspe<;ao do DOM 


seletorjQuery.f\\\er(filtro) 

Accssa todos os elementos seletorjQuery c sclcciona somentc aquclcs dcfinidos 
em filtro. 

No exemplo a seguir, acessaram-se todos os paragrafos e selecionaram-se 
somente aquclcs cujo atributo class c alvo, aplicando nelcs a cor vermelha. 

Exemplo: 


<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

S(document).ready(function() { 

S('button').click(function() { 

S('p').filterC.alvo’).css('color', 'red'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Filtrar</button><br /> 

<p>Texto de paragrafo sem atributo classe.</p> 

<p class="alvo">Texto de paragrafo com atributo class = "alvo".</p> 
<p class="alvo">Texto de paragrafo com atributo class = "alvo".</p> 
<p>Texto de paragrafo sem atributo dasse</p> 

<p class="alvo">Texto de paragrafo com atributo class = "alvo".</p> 



[arquivo-4.4a.html] 


Nessc exemplo, utilizou-se um botao para disparar o evento. Vcja o funcio- 
namento desse script clicando o botao “Filtrar” no arquivo indicado, disponivel 
no site do livro. 
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seletorjQuery.f\\ter(fun0o) 

Estc metodo funciona de forma identica ao metodo anterior, admitindo para 
filtro uma iungao JavaScript. 


seletorjQuery.\s(expressao) 

Acessa todos os elementos seletorjQuery e verifica se pelo menos um deles satisfaz 
as condi<;6es estabelecidas no parametro expressao. Retorna os booleanos true/false 
caso posirivo ou negativo respectivamente. 

No exemplo a seguir, verifica-se se algum div possui a classe de nome cor e 
escreve-se o resultado em um paragrafo com o mctodo text(). Como existe tal 
div, o valor retornado deve ser true. 

Exemplo: 


<script type="text/javascript" src=". ./jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

$(document).ready(function() { 

$('button').c1ick(function() { 

var resultados = ($('div').is('.cor')); 

S('p').text('0 valor retornado e: ' + resultados); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Resultado</buttonxbr /> 

<div>Primeiro div</div> 

<div class="cor">Segundo div</div> 

<div>Terceiro div</div> 

<p></p> 



[arquivo-4.4b.html] 


Nesse exemplo, utiliza-se um botao para disparar o even to. Veja o funciona- 
mento desse script clicando o botao “Resultado” no arquivo indicado, disponivel 
no site do livro. 
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seletorjQuery.not(expressao) 

Accssa todos os elcmcntos seletorjQuery e exclui da sele^ao aqueles que satisfazem 
a condi^ao cstabclccida cm expressao. 

No exemplo a seguir, selecionaram-se os divs e aplicou-se uma cor dc fundo 
naqueles que nao possuem a classe de nome sem-fundo. 

Exemplo: 

<style type="text/css" media="aH"> 

div {float:left; margin:10px; width:90px; height:90px; border:lpx solid #000;} 
</style> 

<script type="text/javascript" src*"../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('button').click(functionO { 

S(‘ div'). note .sent-fundo ').css('backgroundColor', '#ff0'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Resultado</buttonxbr /> 

<div class="sem-fundo”>Prinieiro div</div> 

<div>Segundo div</div> 

<div>Terceiro div</div> 

<div class="sem-fundo">Quarto div</div> 

<div>Quinto div</div> 



[arquivo-4.4c.html] 


Nesse exemplo, utilizou-se um botao para disparar o evento. Veja o fun- 
cionamento desse script clicando o botao “Resultado” no arquivo indicado, 
disporrivel no site do livro. 


seletor jQuery.s\ke{inicio [fim]) 

Acessa todos os elementos seletorjQuery e seleciona desde o elemento na posigao 
inicio ate o elemento na posi^ao fim. Nao inclui o elemento da posiyao fim. O 
parametro fimc opcional e, se omitido, faz a selegao ate o ultimo elemento. 

Lembre-se de que a contagem JavaScript inicia em 0 (zero), assim inicio = 3 e 
fim = 11 seleciona do quarto ao decimo primciro elemento. 
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No cxcmplo a scguir, selecionaram-sc os divs da posi^ao dois a posi^ao cinco 
c aplicou-sc uma cor dc fundo nclcs. 

Exemplo: 


<style type="text/css M media="all"> 

div {float:left; margin:10px; width:90px; height:90px; bordenlpx solid #000;} 
</sty1e> 

<script type="text/javascript" src=". ./jquery-1.2.6.js"x/script> 

<script type="text/javasc ript”> 

$(document).ready(function() { 

$C'button').click(function() { 

S('div').sliced, 5).css('backgroundColor', ’#ffO'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Resultado</buttonxbr /> 

<div class="sem-fundo">Primeiro div</div> 

<div>Segundo div</div> 

<div>Terceiro div</div> 

<div class="sen-fundo">Quarto div</div> 

<div>Quinto div</div> 

<div>Sexto div</div> 


[arquivo-4.4d.html] 

Nesse exemplo, urilizou-se um botao para disparar o evento. Veja o funciona- 
mento desse script clicando o botao“Resultado” no arquivo indicado,disponivel 
no site do livro. 

seletorjQuery.add(expressao) 

Seleciona todos os elementos seletorjQuery e a cstes adiciona os elementos dcfinidos 
no parametro expressao. 

No exemplo a seguir, selecionaram-se os divs e a estes se adicionou o paragrafo 
com a classe de nome clear aplicando uma cor de fundo no conjunto selecionado 
(os divs mais o paragrafo com a classe clear). 

Exemplo: 
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<style type="text/css M media="all"> 

div {float:left; margin:10px; width:90px; height:90px; border:lpx solid #000;} 
.clear {dear:both;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type=”text/javascript"> 

$(document).ready(function() { 

J('button').click(function() { 

S('div').add('.clear').css('backgroundColor', '#ff0') 

}); 

}); 

</script> 

</head> 

<body 

<button type="button">Resultado</button><br /> 

<div>Pri«ieiro div</div> 

<div>Segundo div</div> 

<div>Terceiro div</div> 

<p class="clear">Primeiro paragrafo</p> 

<p>Segundo paragrafo</p> 

<p>Terceiro paragrafo</p> 



[arquivo-4.4e.html] 


Nesse exemplo, urilizou-se urn botao para disparar o evento. Veja o funciona- 
mento desse script clicando o botao“Resultado” no arquivo indicado,disponivel 
no site do livro. 


seletorjQueryx\)\\6ren([expressao]) 

Seleciona todos os elementos-filho de seletorjQuery. O parametro expression facul- 
tativo e, quando definido, destina-se a filtrar os elementos-filho encontrados. 

No exemplo a seguir, selecionaram-se todos os elementos-filho do paragrafo, 
filtraram-se os span e neles se aplicou uma cor dc fundo. 

Exemplo: 


<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

$(document).ready(function() { 

S('button').click(function() { 
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$('p').children('span').css('backgroundColor', '#ffO*) 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Resultado</buttonxbr /> 

<p>Paragrafo com <span>span um</spanxb>bold um</b> 
e a seguir <i>italico um</i>.<br /> Na continua<;ao 
<span>span dois</span> e finalmente <span>ultimo span.</span></p> 



[arquivo-4.4f.html] 


Nesse exemplo, utilizou-se um botao para disparar o eventa Veja o funciona- 
mento dessc script clicando o botao “Resultado” no arquivo indicado, dispomvel 
no site do livro. 


seletorjQuery.fin d ( [expressao]) 

Seleciona todos os clementos desccndcntes de seletorjQuery que satisfazem expressao. 

No exemplo a seguir, encontraram-se os elementos em italico pertencentes ao 
paragrafo c aplicou-se uma cor de fundo ao conjunto sclecionado. 

Exemplo: 


<script type="text/javascript" src="../jquery-1.2.6.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() { 

SC'button^.clickCfunctionC) { 

S('p').find('i').css('backgroundColor', ’#ffO’) 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Resultado</button><br /> 

<p>Paragrafo com <span>span um</spanxb>bold um</b> 
e a seguir <i>italico um</i>.<br /> Na continuaijao 
<span>span dois</span> e finalmente <span>ultimo span.</spanx/p> 



[arquivo-4.4g.html] 
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Ncssc exemplo, utilizou-se um botao para disparar o cvcnto. Vcja o funciona- 
mento desse script clicando o botao “Rcsultado” no arquivo indicado,dispom'vcl 
no site do livro. 



Note que este metodo cumpre a mesma fun^aodo seletorcomposto S(p span). 
A vantagem de seu uso esta no fato de aceitar uma expressao como parSmetro 
de busca. o que nao e possivel com seletores compostos. 


seletorjQuery.pa rent [[expressao]) 

Seleciona todos os elementos que sejam elemento-pai do seletorjQuery. Admite o 
parametro expressao como um filtro. 

No exemplo a seguir, selecionaram-se os elementos-pai de paragrafo e aplicou- 
se uma cor de fundo ao conjunto selccionado. 

Exemplo: 


<sty!e type="text/css" media="aH"> 

div, blockquote {width:300px; height:40px; margin:10px; border:lpx solid #000;} 
</style> 

<script type="text/javascript" src=". ./jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

S(document).ready(function() { 

$('button').c1ick(function() { 

$('p').parent().css('backgroundColor', '#ffO’) 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Resultado</buttonxbr /> 

<divxh4>Cabeca1ho h4 filho de um div</h4x/div> 

<div><p>Paragrafo filho de um div</px/div> 

<blockquote><p>Paragrafo filho de blockquote</px/blockquote> 



[arquivo-4.4h.html] 


Nesse exemplo, utilizou-se um botao para disparar o evento. Veja o funciona- 
mento desse script clicando o botao “Resultado” no arquivo indicado,dispomvel 
no site do livro. 
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seletorjQuery .pa rents ([expressao ]) 

Seleciona todos os ancestrais do seletorjQuery. Admite o parametro expressao como 
urn filtro. 

No exemplo a seguir, selecionaram-se todos os elementos ancestrais do ele- 
mcnto span e aplicou-se uma borda preta de 2px de espessura cm volta dc cada 
um deles. Para facilitar a visualiza^ao destc exemplo no arquivo dispontvel no 
site do livro, acresentaram-se regras CSS para definir uma cor de fundo para cada 
um dos elementos ancestrais de span. 

Exemplo: 


<style type="text/css" media="all"> 
html {background:#0f0;} 
body {background:#ccc; width:400px;} 
div {margin:20px; background:#ffc;} 
blockquote {background:#OfO;} 
p {background:#0ff;} 
span {background:#f93;} 

</style> 

<script type="text/javascript" src=". ./jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

S(document).ready(function() { 

S('button').click(function() { 

S('span').parents().css('border’, '2px solid #000') 

}); 

}); 

</script> 

</head> 

<body> 

<div> 

<blockquote> 

<p>Paragrafo 

<span> 

filho 

</span> 

de blockquote. 

</p> 

</blockquote> 

</div> 

<button type="button">Resultado</button> 



[arquivo-4.4i.html! 
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Ncsse cxemplo, utilizou-se um botao para disparar o evcnto. Vcja o funciona- 
mcnto dcssc script clicando o botao “Rcsultado” no arquivo indicado, disponivel 
no site do livro. 

seletorjQuery. p re v ([ expressao ]) 

Seleciona o elemento adjaccnte imediatamcnte anterior ao seletorjQuery. Admite 
o parametro expressao como filtro. 

No exemplo a seguir, o script parte do ultimo elemento e a cada clique no 
botao disparador do evento seleciona o elemento-irmao anterior definindo para 
este uma imagem de funda Ao atingir o primeiro elemento, o script para de 
selecionar porque o primeiro elemento nao possui elemento anterior. 

Exemplo: 


<style type="text/css" media="all"> 

div {float:left; width:80px; height:80px; margin:10px; border:2px solid #00f;} 
button {display:block;cl ear:both;} 

</sty1e> 

<script type="text/javascript" src= M ../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

var divCorrente = $('.corrente’); 

divCorrente.css('background', 'url(flor.jpg) no-repeat'); 
S('button').c1ick(function() { 

divCorrente = divCorrente.prevO; 

$(’div').css(’background', ”); 

$divCorrente.css('background', 'url(flor.jpg) no-repeat'); 

}); 

}); 

</script> 

</head> 

<body> 

<div>DIV um</div> 

<div>DIV dois</div> 

<div>DIV tres</div> 

<div>DIV quatro</div> 

<div>0IV cinco</div> 

<div>DIV seis</div> 

<div class="corrente">DIV sete</div> 

<button type="button">&laquo; Anterior</button> 



[arquivo-4.4j.html! 
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Ncsse cxcmplo, urilizou-sc um botao para disparar o cvcnto. Vcja o funcionamcn- 
to dcssc script clicando scguidamcntc o botao “Anterior” no arquivo indicado, 
dispom'vel no site do livro. 


seletorjQuery.nex\([expressao]) 

Seleciona o elemento adjacente imediatamente posterior ao seletorjQuery. Admite 
o parametro expressao como filtro. 

Este metodo funciona da mesma maneira que o anterior, selecionando ele- 
mentos em ordem crescente. 


Esse script esta no arquivo indicado a seguir. 



[arquivo-4.4k.html] 


Nesse exemplo, utilizou-se um botao para disparar o evento. Veja o funciona- 
mento desse script clicando seguidamente o botao “Proximo” no arquivo indicado, 
dispom'vel no site do livro. 


seletorjQuery.prevM\([expressao]) 


Seleciona todos os elementos-irmao adjacentes seletorjQuery anteriores a ele. Admite 
o parametro expressao como filtro. 

Este metodo funciona da mesma maneira que prev(), selecionando todos os 
elementos-irmao adjacentes anteriores. 


Este script esta no arquivo indicado a seguir. 



[arquivo-4.4l.html] 


Nesse exemplo, utilizou-se um botao para disparar o evento. Veja o funciona- 
mento desse script clicando seguidamente o botao “Anterior” no arquivo indicado, 
dispom'vel no site do livro. 


seletorjQuery. n ex t A11 ( [expressao ]) 

Seleciona todos os elementos-irmao adjacentes de seletorjQuery. Admite o para¬ 
metro expressao como filtro. 


Este metodo funciona da mesma maneira que prevAllO, selecionando todos 
os elementos-irmao adjacentes subsequentes. 


Este script esta no arquivo indicado a seguir. 



[arquivo-4.4m.html] 


Material com direitos autorais 



146 


jQuery ■ A Biblioteca do Programador JavaScript 

Ncsse cxemplo, utilizou-sc uni botao para disparar o cvento. Vcja o funcio- 
namcnto dcssc script clicando scguidamcnte o botao “Proximo” no arquivo 
indicado, dispomvel no site do livro. 

seletorjQueryl . seletorjQueryN.end().metodo_continua() 

Estc metodo permitc interferir cm um cncadeamcnto de me tod os jQuery, revcr- 
tcndo a sclc^ao ao objcto anterior ao ultimo objcto adjaccntc ao metodo end() na 
cadeia. Na sintaxe mostrada,os etcitos contidos no metodo wetodo^continuaO scrao 
aplicados ao seletorjQuery(N-l). 

Os objetos jQuery aos quais se aplica este metodo sao add, andSelf, children, 
filter, find, map, next,nextAll,not, parent, parents, prev, prevAll, siblings e slice c rambem 
a fun^ao clone. 

Exemplo: 

<style type="text/css” media="all"> 

div {width:400px; height:lOOpx; margin:10px; border:2px solid #00f;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('button:eq(0)').click(function() { 

SCdiv^.findCp’J.cssCbackground', *#f00’); 

}); // sem uso de end() a cor do fundo e para o paragrafo dentro do div 

$('button:eq(l)').click(function() { 

S('div').find('p').end().css('background', '#f00'); 

}); // mesmo codigo com uso de endQ a cor do fundo reverte para o div 
$('button:eq(2)').click(function() { 

S('div, p').css('background', "); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Sem end()</button> 

<button type="button">Com end()</button> 

<button type="button">Reset</button> 

<div> 

<p>Este paragrafo esta dentro do div</p> 

</div> 



[arquivo-4.4n.html] 
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Ncsse exemplo, mostraram-se duas situagoes com o objctivo dc cnfatizar na 
pratica o funcionamento dc end(). No primciro caso, a estiliza^ao fez-sc direta- 
mente no paragrafo sclccionado pelo script e, na segunda situa^ao, usando o 
metodo end(), transferiu-se a estilizagao para o elemcnto div imediatamente antes 
do metodo que seleciona o paragrafo no encadeamento. 

seletorjQueryl . seletorjQueryN.and5e\1().metodo_continua() 

Este metodo, tal como o anterior, permitc interferir em um encadeamento de 
metodos jQuery, revertendo a sele^ao aos dois ultimos objetos da cadeia. Na 
sintaxe mostrada, os efeitos contidos no metodo metodo_continua() serao aplicados 
simultaneamente ao seletorjQuery(N-l) e ao seletorjQueryN. 

Os objetos jQuery aos quais sc apiica este metodo sao add, andSelf, children, 
filter, find, map, next, nextAll, not, parent, parents, prev, prevAll, siblings e slice c tambem 
a fun^ao clone. 

Exemplo: 

<style type="text/css" media="all"> 

div {width:400px; height:lOOpx; margin:10px; border:2px solid #00f;} 

</style> 

<script type="text/javascript" src«". ./jquery-1.2.6. js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('button:eq(0)')-click(function() { 

SCdiv^.findCp^.andSelfO.cssCborder', '2px dotted #f00'); 

}); 

$('button:eq(l)’).click(function() { 

$('div, p').css(’border', "); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">andSelf()</button> 
ebutton type="button">Reset</button> 

<div> 

<p>Este paragrafo esta dentro do div</p> 

</div> 



[arquivo-4.4o.html] 
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seletorjQuery.sM\nqs([expressao]) 

Seleciona todos os irmaos de seletorjQuery. Admite o parametro expressao como 
filtro. 

No exemplo a seguir, o script seleciona todos os irmaos do elemento li cuja 
classe e diferente e aplica lima cor de fundo amarela. Note que o elemento li com 
a classe diferente nao e selecionado, mas somente seus irmaos. 

Excmplo: 

<script type="text/javascript"> 

$(document).ready(function() { 

S('button:eq(0)').click(function() { 

S('li.diferente').siblings().css(’background', 'yellow'); 

}); 

$('button:eq(1)').click(function() { 

S('li.diferente’).siblingsO.css('background', "); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">sibi1ings()</button> 

<button type="button">Reset</button> 

<ul> 

<li>Item l</li> 

<li>Item 2</1i> 

<li class="diferente">Item 3</li> 

<li>Item 4</li> 

<li>Item 5</li> 

</ul> 

<ul> 

<li>Item l</li> 

<li>Item 2</li> 

<li>Item 3</li> 

<li>Item 4</li> 

<1i>Item 5</li> 

</ul> 



[arquivo-4.4p.html] 
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seletorjQuery.maptfuntfo) 

Transforma o conjunto de objctos retornado pelo seletorjQuery cm urn array cujos 
valores podcm ser elementos ou retcrencias. O parametro fun^ao define como sera 
feita a sele^ao dos valores do array e qual a sua natureza. 

No exemplo a seguir, a funcao recolhe o valor de cada um dos campos de um 
formulario, armazena cm um array e escreve os valores. 

Exemplo: 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('button:eq(0)').dick(function() { 

S(’div').append(S('input').map(function() { 
return S(this).val(); 

}).get().join(’, ')); 

}); 

$('button:eq(l)')-click(function() { 

$('div')-empty(); 

}); 

}); 

</script> 

</head> 

<body> 

<p>Digite nome e e-mail nos campos e rode o script</p> 

<button type="button">map()</button> 

<button type="button">Reset</button> 

<form action="" method="get’’> 

<label>Nome:<br /xinput type="text” /></labelxbr /> 

<label>E-mail:<br /xinput type="text" /x/labelxbr /> 

<span>Sexo:</spanxbr /> 

clabelxinput type="radio" name="sexo" value="masculino" /> Masculino</labelxbr /> 
<labelxinput type=”radio" name="sexo" value="feminino" /> Feminino</label> 
</form> 

<divx/div> 



[arquivo-4.4q.html] 
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CAPITULO 5 

Eventos 


Neste capitulo, scrao cstudados os eventos disponiveis na biblioteca jQuery. Na 
linguagem JavaScript, a entrada cm funcionamento dc um script depende de uni 
evento. £ licito afirmar que sc nao houvessc eventos, simplesmente nao haveria 
JavaScript. Evento, tambem chamado de gatilho, e uma agao do usuario que 
desencadeia o im'cio do script ou faz roda-lo. 

Quando o usuario abre uma pagina web, clica um botao, pressiona uma tecla, 
seleciona um campo etc., ocorre o evento. JavaScript possui tnecanistnos capazes 
de detectar a ayao do usuario e desencadear o script. O conhecimento da sintaxe 
que captura um evento e fundamental para o desenvolvimento de scripts. 


5.1 Eventos auxiliares 

seletorjQuery.b\ur(fun<;do) 

Quando o seletorjQuery perde o foco,ocorre o evento blur() e entra cm a^ao o script 
definido no parametro fun^ao. Esse evento e amplamente usado em campos de 
formulario para disparar um script (por cxemplo: um script para validar os dados 
inscridos no campo) quando o usuario abandona o campo. 

Exemplo: 


<script type="text/javascript" src=”../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

$(document).ready(function() { 

J('input').blur(function() { 

SC input').css('background’, ’yellow'); 
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$('.mensagem').text('Voce disparou o evento blur.'); 

}); 

}); 

</script> 

</head> 

<body> 

<p>Clique dentro do campo de texto abaixo<br /> 
e depois em qualquer lugar fora dele.</p> 
cinput type="text" /> 

<p class=”mensagem"x/p> 



[arquivo-5.1a.html] 


Os eventos jQuery seguem uma sintaxe ligeiramente diferente dos da linguagem 
JavaScript. Note que o evento jQuery blur tem seu correspondente JavaScript 
com sintaxe onblur. Se voce desenvolve JavaScript e algo der errado com seu 
script que usa eventos, antes de mais nada verifique a grafia dos eventos. 


seletorjQuery.chanqe[fun0o) 

O evento changeO ocorre quando o valor em um campo de formulario perde 
o foco em favor dc outre valor. O uso classico desse evento e cm campos de 
formulario do tipo select, no qual o evento ocorre quando o usuario seleciona 
uma das opfoes. 

Exemplo: 


<script type="text/javascript" src=". ./jquery-1.2.6.js”x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

S('select').change(function() { 

var valorEscolhido = $('option:selected').text(); 

$('.mensagem'l.htmlCVoce disparou o evento change.<br />Selecionou: ' 
+ valorEscolhido); 

}); 

}); 

</script> 

</head> 

<body> 

<p>Fa<;a algumas selecoes no campo select.</p> 

<select> 

<option>Escolha um</option> 

<option>Escolha dois</option> 

<option>Escolha tres</option> 

<option>Escolha quatro</option> 


Material com direitos autorais 




Capitulo 5 ■ Eventos 


153 


<option>Escolha cinco</option> 
<option>Escolha seis</option> 
<option>Escolha sete</option> 
</select> 

<p c1ass="mensageni"></p> 
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seletorjQuery.c\\ck(fun$ao) 

O evento click() ocorre quando o usuario clica o ponteiro de um dispositive 
apontador (por exemplo: o ponteiro do mouse) sobre seletorjQuery , disparando o 
script definido no parametro funcao. Nos exemplos constantes dos capitulos ante- 
riores, nos scripts em que se usou um botao para faze-los funcionar, utilizou-se 
o evento click. Volte a um daqueles exemplos para estudar esse evento. 

seletorjQuery Abk\kWun<;cio) 

O evento dblcIlickO ocorre quando o usuario clica duas vezes seguidas o ponteiro 
de um disposidvo apontador (por exemplo: o ponteiro do mouse) sobre seletor¬ 
jQuery, disparando o script definido no parametro fun^ao. 

Exemplo: 

<style type="text/css" media="a11"> 
div { 

width:90px; 
height:90px; 
background:green; 
border:2px solid #000; 

} 

.muda-cor {background:red;} 

</style> 

<scri pt type="text/javasc ript" src="../jquery-1.2.6. js"x/scri pt> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('div').dblclick(function() { 

SCdiv^.toggleClassCmuda-cor’); 

$('.mensageui').htnil('Voce disparou o evento dblclick.’); 

}); 

}); 

</script> 

</head> 


Material com direitos autorais 



154 


jQuery ■ A Biblioteca do Programador JavaScript 


<body> 

<p>Um duplo clique no div e ocorre o evento dblclick.</p> 
<divx/div> 

<p class="mensagenfx/p> 



[arquivo-5.1c.html] 


seletorjQuery.error(fun0o) 

O evento error() ocorre quando urn erro e detectado, quer seja de programagao 
(por exemplo: sintaxe errada), quer seja com uni elemento na arvore do docu- 
mcnto. Uni exemplo dc erro com o elemento img ocorre quando o caminho para 
a imagem definido no atributo sre esta errado, c invalido ou quando nao cxiste 
a imagem. Nesses casos, o navegador Internet Explorer renderiza um pequeno 
icone com aproximadamente 30 x 30px indicando quebra da imagem. Para 
esconder o icone, use o script mostrado a seguir. 

S('in»g').error(functionO { 

$(this).hide(); 

}); 

Nao ha uma dirctriz publica para tratamento de erros cm JavaScript, o que 
torna o assunto complexo, na medida cm que envolve implementagoes propric- 
tarias. O estudo e aprofundamento do tratamento de erros fogem ao escopo 
deste livra 

seletorjQuery,focus{fun0o) 

Quando o seletorjQuery rccebe o foco, ocorre o evento focus() e entra cm agao o 
script definido no parametro fun^ao. Esse evento e amplamente usado eni campos de 
formulario para disparar um script (por exemplo: um script mostrando um pop-up 
com dicas para o preenchimento do campo) quando o usuario entra no campa 

Exemplo: 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

S(document).ready(function() { 

$('input').focus(function() { 

SCinput'J.cssCbackground', 'yellow'); 

SC.mensagem').text('Use apenas numeros para informar seu CPF.'); 

}); 

}); 

</script> 
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</head> 

<body> 

<p>Clique dentro do campo de texto abaixo.</p> 
<label>CPF: cinput type="text" /></label> 

<p class="mensagem"x/p> 



[arquivo-5.1d.html] 


seletorjQuery. keyd ovjn{fun<;ao) 

Ocorre o evento keydownO quando o usuario pressiona uma tecla qualquer de 
seu teclado. Esse evento tem sua aplicagao mais comum em campos de formu¬ 
la rio, particularmente em textarea, para contar e informar ao usuario o numero 
de caracteres digitados quando sc pretende limitar a extcnsao da entrada (por 
exemplo: em campos para entrada de comentarios ou envio de mensagens). 



Se voce pretende bloquear a entrada de caracteres a parbr de um determinado teto. 
use jQuery somente para informar ao usuario o numero de caracteres a medida 
que ele digita Para efetuar o bloqueio a partir do teto, use uma programagio que 
rode no servidor (por exemplo: PHP, ASP, ColdFusion etc,). 


Exemplo: 

<script type="text/javascript" src="../jquery-1.2.6.js"></script> 

<script type="text/javascript"> 

$(document).ready(functionC) { 

$(* i nput’) .keydown(function() { 

SCbody^.cssC'background', '#cff'); 

$('.mensagem').html('Ao pressionar uma tecla qualquer do seu tecladocbr /> 
ocorreu o evento keydown e a cor de fundo da pagina mudou.'); 

}); 

}); 

</script> 

</head> 

<body> 

<p>Entre uma letra qualquer no campo abaixo.</p> 
cinput type="text" /> 

<p class="mensagem"x/p> 



[arquivo-5.1e.html] 
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seletorjQuery. key u p [fun0o) 

Ocorre o evento keyupO quando o usuario solta uma tecla qualquer do teclado 
que tenha sido pressionada. 

seletorjQuery Meyptess{fun0o) 

Ocorre o evento keypressO quando o usuario realiza a sequencia apertar e soltar 
uma tecla qualquer do teclado. 

seletorjQuery.\oad{fun0o) 

Ocorre o evento load() quando o seletorjQuery termina de ser car regad o e nesse 
momento entra em a<jao o script definido no parametro funtao. Esse evento, nor- 
malmente, e usado para o objeto window e ocorre quando toda a pagina acaba de 
ser car regad a. 

A sintaxc para esse evento c mostrada a seguir: 

SC'window') .load (function() { 

// seu script aqui 

}); 


seletorjQuery.mouse6o\Nn{fun0o) 

O evento mousedownO ocorre quando o usuario pressiona o botao de um dispositivo 
apontador (por exemplo: o ponteiro do mouse) sobre seletorjQuery , disparando o 
script definido no parametro funcao. 

Exemplo: 

<style type="text/css M media="a11"> 
body {cursor:pointer;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('h2').i!K>usedown(functionO { 

SCthis).appendC’ mousedown '): 

}); 

}); 

</script> 

</head> 
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<body> 

<h2>Fa<;a acontecer mousedown aqui.</H2> 


[arquivo-5.1f.html] 

seletorjQuery.mouseup(fun0o) 

O evcnto mouseupO ocorrc quando o usuario solta o botao de um dispositivo 
apontador (porexemplo: o ponteiro do mouse) sobre seletorjQuery, disparando o 
script definido no parametro fun<;ao. 

Exemplo: 


<style type="text/css" media=<"all"> 
body {cursor:pointer;} 

</style> 

<scri pt type="text/javascri pt" src="../jquery-1.2.6. js"x/scri pt> 
<script type="text/javascript"> 

S(document).ready(function() { 

$('h2').mouseup(function() { 

S(this).append(’ mouseup '); 

}); 

}); 

</script> 

</head> 

<body> 

<h2>Faqa acontecer mouseup aqui.</h2> 



[arquivo-5.1g.html] 


O script a seguir demonstra o emprego conjunto dos dois eventos anteriores, 
facilitando a visualizagao do momento em que cada um deles ocorre. 


<style type="text/css" media="aH"> 
h2 {cursor:pointer;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('h2').mousedown(function() { 

$(this).append(’ <span sty1e="color:blue”>mousedown</span> '); 
}).»ouseup(function() { 

$(this).append(' <span style="color:red">mouseup</span> '); 
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}); 

}); 

</script> 

</head> 

<body> 

<h2>C1ique, segure e solte.</h2> 



[arquivo-5.1h.html] 


seletorjQuery.mouseom(fun<;ao) 

O evento mouseover() ocorre quando o usuario passa um dispositivo apontador 
(por exemplo: o ponteiro do mouse) sobre seletorjQuery , disparando o script de- 
fin ido no parametro funtfo. 

Exemplo: 

div {width:90px; height:90px; background:green; border:2px solid black;} 

</style> 

<script type="text/javascript" src»"../jquery-1.2.6.js"x/script> 

<script type="text/javascript''> 

S(document).ready(function() { 

S('div').mouseover(function() { 

$(this).css('background', 'red'); 

}); 

»; 

</script> 

</head> 

<body> 

<p>Passe o mouse sobre o div</p> 

<div>DIV</div> 



[arquivo-5.1i.html] 


seletorjQuery.mouseout(fun0o) 

O evento mouseoutO ocorre quando o usuario retira o dispositivo apontador (por 
exemplo: o ponteiro do mouse) de cima do seletorjQuery , disparando o script 
definido no parametro funfao. 

Exemplo: 
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div {width:90px; height:90px; background:green; border:2px solid black;} 
</style> 

<script type="text/javascript" src=*"../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('div’),mouseout(function() { 

$(this).css(’background', ’red'); 

}); 

}); 

</script> 

</head> 

<body> 

<p>Coloque o mouse sobre o div e retire</p> 

<div>DIV</div> 



[arquivo-5.1j.html] 


O script a seguir dcmonstra o cmprcgo conjunto dos dois eventos anteriores. 
Observe que ao combinar os metodos mouseover() e mouseout(), obtem-se o classico 
efeito rollover, tao usado cm menus dc navegagao. 


div {width:90px; height:90px; background:green; border:2px solid black;} 
</style> 

<script type="text/javascript" src=”../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

S(document).ready(function() { 

S('div').mouseover(function() { 

$(this).css( , background', ’red’); 

}).mouseout(function() { 

S(this).css('background', 'green');; 

}); 

}); 

</script> 

</head> 

<body> 

<p>Passe o mouse sobre o div e retire.</p> 

<div>DIV</div> 



[arquivo-5.1k.html] 
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seletorjQuery.mo\isemove(fun0o) 

O evento mousemoveO ocorre quando o usuario movimenta o dispositivo apontador 
(por excmplo: o ponteiro do mouse) sobrc o seletorjQuery , disparando o script 
definido no parametro funcao. Esse evento e amplamente usado para armazenar 
as coordenadas do dispositivo apontador. 

Exemplo: 


<style type="text/css" media="all"> 

div {margin-1eft:lOOpx;width:200px; height:200px;background:red; 
border:2px solid black;} 

</style> 

<script type="text/javascript" src=". ./jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

S(document).ready(function() { 

S('div').mousei»ove(function(o) { 

var windowCoordenadas = '(x = ' + o.clientX + ' y = ' + o.clientY + 
$('span').css('display', 'block').text('Coordenadas: ' + windowCoordenadas); 
S('div').mouseout(function() { 

S('span').css('display', 'none'); 

}); 

}); 

}); 

</script> 

</head> 

<body> 

<p>Movimente o mouse sobre o div.</p> 

<divx/div> 

<spanx/span> 



[arquivo-5.1l.html) 


seletorjQuery.res\ze[fun<;ao) 

O evento resize() ocorrc quando ha redimcnsionamcnto do seletorjQuery , dis¬ 
parando o script definido no parametro fun<;ao. No exemplo a seguir, o script e 
executado quando o usuario redimensiona a janela do navegador. 

Exemplo: 

<script type="text/javascript'' src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 
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$(document).ready(function() { 

S(window).resize(function() { 

$('body’). text('0ps! Voce redimensionou a janela do navegador.'); 

}); 

}); 

</script> 

</head> 

<body> 

<spanx/span> 

</body> 

</html> 



[arquivo-5.1m.html] 


Para visualizar o funcionamento do script, abra o arquivo correspondenrc cm 
seu navegador e redimensione a janela do navegador. 


seletorjQuery.sc.ro\\{fun0o) 

O even to scroll () ocorre quando o usuario aciona uma das barras de rolagem do 
seletorjQuery , disparando o script definido no parametro fun^io. 

Exemplo: 

<style type="text/css" media="all"> 

div {width:200px; height:150px; overflow:scroll;} 
b {color:red;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

S(document).ready(function() { 

SC'div’).scroll(functionO { 

S('b').textC'Voce acionou a barra de rolagem do div'); 

}); 

}); 

</script> 

</head> 

<body> 

<div> 

<h4>Div com barra de rolagem</h4> 

<p>...muito conteudo...</p> 

</div> 

<bx/b> 



[arquivo-5.1n.html] 


Material com direitos autorais 



162 


jQuery ■ A Biblioteca do Programador JavaScript 


seletorjQuery.se\ect(fun0o) 

O evcnto selectO ocorre quando o usuario seleciona um texto ou fragmento 
dc texto do seletorjQuery , disparando o script dcfinido no parametro fun^ao. Mas, 
aten^ao: esse evento so e valido para sele^oes de textos contidos em campos de 
formulario destinados a entrada de textos, tais como i nput e textarea. Nao confunda 
esse evento com o evento changeO, que ocorre quando o usuario muda a selegao 
em um campo de formulario do tipo select. 

Exemplo: 


<style type="text/css" media="all"> 

span {font:small-caps bold 20px sans-serif; color:#f00;} 

</style> 

<script type="text/javascript" src=". ./jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

S(document).ready(function() { 

$(document).select(function() { 

$(’<span>Voce disparou o evento select</span>‘) 

.show().fadeOut(1500).appendTo('div'); 

}); 

}); 

</script> 

</head> 

<body> 

<p>Clique e arraste o mouse no texto dentro do campo para seleciona-lo.</p> 
<input type="text" value=”selecione este texto"> 

<divx/div> 



[arquivo-5.1o.html] 


seletorjQuery.su bm\t(fun<;ao) 

O evento submitO ocorre quando o usuario submete ou envia os dados colhidos 
ou contidos em seletorjQuery, disparando o script definido no parametro funtao. 
Esse evento e amplamente empregado para verifica^ao dos dados preenchidos 
pelo usuario em um formulario tao logo ele tente envia-lo. 

Exemplo: 

<style type="text/css" media="all"> 
div {color:#f00;} 

</style> 

<script type="text/javascript” src="../jquery-1.2.6.js"x/script> 


Material com direitos autorais 



Capitulo 5 ■ Eventos 


163 


<script type="text/javascript"> 

$(document).ready(functionO { 

$('form').submit(function() { 

if ($('input:first').val() == ") { 

S(’div').text('Por favor! Preencha o campo.'); 
return false; 

} 

if C$( 'input:first').val() !«» 'jQuery') { 

S(’div').text('Lamento! entrou a palavra errada.'); 
return false; 

} else { 

S('div').text('Parabens! entrou a palavra certa.'); 

} 

}); 

}); 

</script> 

</head> 

<body> 

<p>Entre a palavra jQuery no campo abaixo e clique o botao Enviar.<br /> 
Atengao: campo sensivel ao tamanho de caixa</p> 

<form action="javascript:void()"> 

<label>Campo de texto</labelxbr /> 

<input type="text" /> 

<input type="submit" value="Enviar" /> 

</form> 

<divx/div> 



[arquivo-5.1p.html] 


seletorjQuery.\in\oa6(fun0o) 

Ocorre o cvcnto unoadO quando o usuario abandona o seletorjQuery que tcnha 
sido carregado anteriormente e nesse momento entra cm a^ao o script definido 
no paramctro funfio. Esse evento c usado para o objeto window e ocorrc quando o 
usuario fecha uma pagina. 

Exemplo: 

<script type="text/javascript" src-"../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

S(window).unload(function() { 

alert('Esta e uma demonstra«;ao do evento unload.'); 

}); 

}); 
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</script> 

</head> 

<body> 

<p>Feche esta janela para constatar o evento unload em a<;ao.</p> 
</body> 



[arquivo-5.1q.html] 


5.2 Eventos de intera^ao 

seletorjQuery.\oqg\e(f1 f2 [fl.JN]) 

O evento toggleO permiteexecutarduas, e opcionalmente mais, fun^des,seguidas 
e alternadamente mediante cliques sucessivos no botao de um dispositivo apon- 
tador (por cxemplo: o ponteiro do mouse) sobrc o seletorjQuery, fazendo entrar 
em a^ao os scripts definidos nas funfoes fl c f2. Quando o usuario clica uma vez 
no seletor jQuery, e executada a fun^ao fl, clicando outra vez, e executada a fun^ao 
f2 , mais uma vez, e executada a fun^ao fi e assim sucessiva e indefinidamente 
alternando a execu^ao das fundoes. 

Esse evento admite a op<;ao de adicionar mais de dois scripts e nesse caso a 
execu^ao deles se faz de fl ate fN, volta a fl e repete-se o ciclo indefinidamente. 

Exemplo: 


<style type="text/css" media="all"> 
p {cursor:pointer;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js’’x/script> 
<script type="text/javascript"> 

$(document).ready(function() { 

S('p').toggle( 
functionO { 

$('iag').css('display', 'block').attr({src:'2.gif'}); 

}, 

functionO { 

$('i«g’).css('display*, 'block').attr({src:'3.gif'}); 

}, 

functionO { 

$('img').css('display', 'block’).attr({src:'4.gif'}); 

}. 

functionO { 
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SCimg^.cssCdisplay', ’block').attr({src:'l.gif'}); 

}) 

}); 

</script> 

</head> 

<body> 

<p>Clique seguidantente aqui,<br /> 
para ver o evento toggleO em a<;ao.</p> 

<img alt="Bate cora<;ao" src="l.gif" /> 



[arquivo-5.2a.html] 


seletorjQuery.hom(sobre fora) 

O cvcnto hover() pcrmitc cxccutar duas fungocs: uma quando o usuario coloca um 
dispositivo apontador (por exemplo: o pontciro do mouse) sobre o seletorjQuerye 
a outra quando ele retira o dispositivo apontador desobre o seletorjQuery, fazendo 
entrar em a$ao os scripts definidos nas fun^oes sobre e fora. Este metodo, tal como 
o metodo toggleO, pode ser usado para obter o conhecido cfeito rollover. 

Exemplo: 

<style type="text/css" media="all"> 
img {cursor:pointer;} 

</style> 

<script type="text/javascript'' src»". ./jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

S(document).ready(function() { 

S(*img’).hover( 
function() { 

$('img').css('display', 'block').attr({src:'2-over.gif'}); 

}, 

functionO { 

SOimg').css('display', 'block').attr({src:'2.gif'}); 

}) 

}); 

</script> 

</head> 

<body> 

<p>Passe o mouse sobre o coragao,<br /> 
para ver o evento hover() em a<;ao.</p> 

<img alt="Bate cora<;ao" src="2.gif" /> 



[arquivo-5.2b.html] 
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5.3 Manipuladores de eventos 

seletorjQuery.b\nA[tipo [dados] fun0o) 

O manipulador de eventos bind() permite vincular um evento ao seletorjQuery , 
fazendo entrar cm a^'ao os scripts definidos nos parametros funcao. O parametro 
dados e facultativo e o parametro tipo define o tipo de evento a vincular. Os eventos 
possivcis sao: blur, focus, load, resize,scroll,unload, click,dblclick, mousedown, mouseup, 
mousemove,mouseover,mouseout,mouseenter, mouseleave, change, select, submit, keydown,keypress, 
keyup c error. 

Exemplo: 


<style type="text/css" media=”all"> 

div (cursor:pointer; width:lOOpx; height:lOOpx; border:2px solid #000; 
span {display:block;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('div’).bind('mouseover', functionO { 

$(this).css(’borderWidth', 'lOpx'); 

SCspanieqCOD.textCOcorreu o evento mouseover. Aumentou espessura da borda.’); 


S('div*).bind('click', function(o) { 

var coordenadas = ’x= ' + o.pageX + y= ' + o.pageY; 
S('span:eq(l)').text('Ocorreu o evento click nas coordenadas: ' + coordenadas); 


S('div*).bindCdbldick', functionO { 

S(this).css('background', ’red’); 

$('span;eq(2)').text('0correu o evento dbldick. Mudou a cor de fundo.'); 

}); 

}); 

</script> 

</head> 

<body> 

<p>Eventos vinculados com bind():</p> 

<ul> 

<li>mouseover - aumenta espessura das bordas.</li> 

<li>click - amazena e mostra as coordenadas do click.</li> 

<1i>dblclick - troca cor de fundo.</li> 

</ul> 
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<divx/div> 

<spanx/span> 

<spanx/span> 

<spanx/span> 



[arquivo-5.3a.html] 


seletorjQuery.one(tipo [dados] funtfo) 

O manipulador de eventos one() permite vincular urn ou mais eventos ao 
seletorjQuery , fazendo entrar cm a$ao os scripts definidos nos parametros fun$ao. 
O parametro dados e facultativo e o parametro tipo define o tipo de evento a 
vincular. Aqui cada um dos elementos selecionados por seletorjQuery executa 
o script uma unica vez. No exemplo a seguir, a caixa de alerta sera mostrada 
somente ao primeiro clique em cada paragrafo. O segundo clique nao executa 
mais o script. 

Exemplo: 


<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

S(document).ready(function() { 

SCp'J.oneCclick', function() { 
a1ert(S(this). textO); 

}); 

}); 

</script> 

</head> 

<body> 

<p>Primeiro paragrafo</p> 

<p>Segundo paragrafo</p> 

<p>Terceiro paragrafo</p> 

<p>Quarto paragrafo</p> 



[arquivo-5.3b.html] 


Para visualizar a diferen^a de funcionamento, faga uma copia do arquivo que 
contem esse script e substitua oneO por bindO. Carregue e pagina modificada e 
clique varias vezes cada paragrafo. 
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seletorjQuery.\r\qqer(tipo [dados]) 

O manipulador de cvcntos trigger() pcrmitc que um evento vinculado a um seletor 
seletorjQuery seja vinculado simultancamente a um scgundo seletor jQuery, sendo 
possivel fazer entrar cm ayao ambos os scripts com o evento ocorrendo somente 
no seletor seletorjQuery vinculado. No exemplo a seguir, foram projetados dois 
botoes. Um clique no botao um dispara o script um e um clique no botao dois 
dispara o script dois e tambern o um, pois se utilizou o manipulador de eventos 
triggerO para vincular o script um aos botoes um e dois. 

Exemplo: 


<style type="text/css" media="aH"> 
span {color:red;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

$(document).ready(function() { 

SC button: first'), cl ick(function() { 
atualizaClique(S('span:first')); 

}); 

$('button:last').click(function() { 

S('button:first').trigger('click’); 
atualizaClique(S('span:last')); 

}); 

function atualizaClique(o) { 
var n * parseInt(o.text(), 0); 
o.text(n + 1); 

} 

}); 

</script> 

</head> 

<body> 

<button type="button">Botao n.l</button> 

<button type="button">Botao n.2</button> 

<p>Soma dos cliques nos botoes 1 e 2 = <span>0</span></p> 
<p>Cliques somente no botao n.2 - <span>0</spanx/p> 
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Para iniciantes: a fungao atualizaCampo(o) funciona como um contador, pois 
recebe um parSmetro, no exemplo dado, o valor contido em um elemento span, 
armazena-o em uma vartevel e acrescenta uma unidade. Os dois scripts rodam 
a fungao atualizaCampo(o) a cada clique, reescrevendo no elemento span o 
novo valor da variavel n. 


seletorjQuery. unbind(f/po [dados]) 

O manipulador de eventos unbindO funciona de forma inversa a bind() estudado 
anteriormente, assim permite desvincular um ou mais eventos que tenham sidos 
vinculados ao seletorjQuery. 


5.4Notas sobre eventos 

O sistema de eventos na biblioteca jQuery foi construido em conformidade com 
as Recomendagdes do W3C. Isto significa a normadza^ao do objcto cvento e a 
garanda da devida passagem do evento para seu respcctivo manipulador, sem 
necessidadc de fazcr verifica^ocs do tipo window. event. Tambem sc normadzaram 
os alvos dos eventos c as propriedadcs para coordcnadas das paginas page.* e 
page.K 

Outra funcionalidade ligada a eventos e a disponibiliza^ao, na biblioteca, dos 
metodos stopPropagationO e preventDefault(). 

event.type 

Este metodo retorna uma string que descreve a natureza do evento. 

Exemplo: 

$('a').click(function(event) { 
alert(event.type); 

)}; 

Retorna: 

"click" 
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event.target 

Estc metodo retorna o alvo do evcnto, ou scja, o elemento ao qual se atribuiu a 
fungSo dc disparar o evento ou urn dc scus elementos-filho. 

Exemplo: 

S('a[href=http:/Mvv.maujor.com]’).c1ick(function(event) { 
alert(event.target); 
return false; 

}); 

Retorna: 

"h ttp: //\mi . mau jor. com/" 


event.pageX/Y 

Este metodo retorna as coordenadas do ponteiro do dispositivo apontador (por 
exemplo: o mouse) em relagao ao documento. 

Exemplo: 

$('div').click(function(event) { 

alert('Voce clicou na posi<;ao: x = ' + event.pageX + " px, y = " + event.pageY 
+' px’); 

}); 

Retorna: 

"As coordenadas do click" 


Para visualizar os tres eventos descritos anteriormente, veja 
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event.preventDefaultO 

Este metodo impede o navegador de seguiro comportamento-padrao para a ayao. 
Por exemplo: aoclicar urn I ink, o navegador e impedidodeseguir para ocndereyo 
do link, ou, ainda, ao clicar um botao dc submissao dc um formulario, este nao 
e submetido. O equivalente JavaScript para esse metodo e: return false. 

Exemplo: 

$(’a[href=http://wi\’w.maujor.com]').click(function(event) { 
event.preventDefaultO; 

}); 
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event.stopPropagation() 

Este metodo impede que o evento anexado a urn elemento se propague para os 
ancestrais do elemento. £ conhecido na programa^ao JavaScript como “cfeito 
bolha” For tratar-se de um efeito que depende de situates particulares, apenas 
se informant que existe a funcionalidade de se poder cancelar o efeito bolha 
existente na biblioteca, ficando a criterio do desenvolvedor usa-la quando estiver 
diante de problemas causados por propaga^ao indevida de eventos. A sintaxe 
geral e mostrada a seguir: 

$C'p').click(function(event) { 
event.stopPropagation(); 

//script vai aqui; 

}); 
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CAPITULO 6 

Efeitos 


Neste capitulo, serao tratados os metodos para obtengao dc efeitos. Sao os efei¬ 
tos um dos objetivos do emprego dc jQuery. As tarefas dc csconder e revelar 
conteudos c fazer funcionar um menu dc uma forma visualmentc agradavel com 
transudes suaves e surpreendentes sao uma funcionalidade da linguagem que 
certamente ira enriquecer a experiencia do usuario. E, com um planejamento 
bem feito, voce conscguira implemcntar efeitos sent bloquear o accsso ou pre- 
judicara usabilidade. 

A apresenta^ao dos metodos para obtengao de efeitos mostrados neste capitulo 
segue uma metodologia diferente da adotada nos capitulos anteriores. Assim 
ocorreu porque os scripts que demonstram os efeitos sao curtos c rcsolvcu-sc 
reunir os efeitos de mesma natureza cm um arquivo unico. Essa metodologia, 
como vantagem adicional, ira possibilitar-lhe fazer a compara^ao entre os efeitos 
consultando um unico arquivo. 


6.1 Efeitos basicos 

seletorjQuery. show() 

O efeito show() revela abruptamente o elemento seletorjQuery que tenha sido es- 
condido anteriormente, quer com uso de script, quer com regra CSS. 

Exemplo de sintaxe: 

$('div').show() 
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Para tirar o m^ximo proveito de seus estudos. ap6s conhecer todos os efeitos 
basicos descritos neste capitulo. consulte os arquivos desenvolvidos para 
demonstrar cada um deles, disponiveis para download no site do livro. 


seletorjQuery.s\\ow{velocidade [fun^ao]) 

O mctodo sboYi(velocidade [ fun<;ao ]) causa o mcsmo efeito criado com o mctodo 
anterior, porem o uso do parametro velocidade permite revclar suavemente o ele- 
mento seletor jQuery. 

O parametro velocidade admite tres valores definidos por palavra-chave, que 
sao: slow, normal e fast, para obtengao de vclocidades dc revelagoes lenta, normal 
e rapida respectivamente. De modo opcional, a velocidade pode ser definida por 
um numero representando o tempo de revelagao em milissegundos. 

O parametro funcao e opcional e permite definir uma fungao cuja execugao 
sera desencadeada tao logo o efeito termine. 

Exemplos dc sintaxes: 

SCdiv'J.showCslow') 

ou 

$('div').show(1000) 

ou 

SCdiv'J.showCfast', functionO { 

// seu script aqui; 

}); 

seletorjQuery.Wideti 

C) mctodo hide() causa o efeito contrario ao criado pclo mctodo show(), escondendo 
abruptamente o elemento seletorjQuery que tenha sido revelado. 

Exemplo de sintaxe: 

S( 'di v') .hideQ 
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seletorjQuery. h id e (velotidade [fun0o]) 

O metodo hide(ve?ocj'dade [ fun<;ao ]) causa o mesmo efeito criado polo metodo 
anterior, porem o uso do parametro velocidade permite esconder suavemente o 
elemento seletorjQuery. 

O parametro velocidade admite tres valores definidos por palavras-chave, que 
sao: slow, normal e fast, para obtengao de velocidadcs de revela^ocs lenta, normal 
e rapida respectivamente. De modo optional, a velocidade pode ser definida por 
um numero representando o tempo de revelagao cm milissegundos. 

O parametro funfao e opcional e permite definir uma fun^ao cuja cxecugao 
sera desencadeada tao logo o efeito termine. 

Exemplos de sintaxes: 

$('div').hide('slow') 

ou 

$('div').hide(1000) 

ou 

SCdivD.hideCfast’, functionO { 

// seu script aqui; 

}); 

seletorjQuery.\oqq\e() 

O metodo toggleO permite criar o efeito de alternancia de visibilidade do conjunto 
de elementos definido por seletorjQuery. Os elementos invisiveis tornam-se visfveis 
e vice-versa a cada disparo do cvcnto. 

Exemplo de sintaxe: 

$('button').click(function() { 

SCp’). toggleO; 

}); 

Consulte o arquivo referenciado a seguir, para ver todos os efeitos basicos 
cstudados antcriomenrc cm ai^ao: 

<style type="text/css" media="all"> 

div {width:200px; height:300px;margin:30px 0;border:2px solid #000;color 
background:#f00; display:none;} 

</style> 
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<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
<script type="text/javascript”> 

$(document).ready(function() { 

S('button').eq(0).click(function() { 

$('div').show(); 

}); 

$('button').eq(l).click(function() { 

$('div').hide(); 

}); 

SC button’).eq(2).click(function() { 

SCdiv'J.showCslow'); 

}); 

S('button’).eq(3).click(function() { 

SCdiv'J.hideCslow'); 

}); 

$('button').eq(4).click(functionO { 

SC'div').show(3000); 

}); 

S('button').eq(5).click(function() { 

S('div').hide(1500); 

}); 

S('button').eq(6).click(function() { // efeito toggleO 
S('p') .toggleO; 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Efeito show()</button> 

<button type="button">Efeito hide()</buttonxbr /><br /> 
<button type="button">Efeito show('slow')</button> 

<button type="button">Efeito hide('slow')</button><br /xbr /> 
<button type="button">Efeito show(3000)</button> 

<button type="button">Efeito hide(1500)</buttonxbr /xbr /> 
<button type="button">Efeito toggleO</buttonxbr /xbr /» 
<div>DIV em todo seu esplendor.</div> 

<p style="display:none; width:300px; background:#0f0;"> 
Clique seguidamente o botao Efeito toggle. 

</p> 
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6.2 Efeitos corrects 

seletorjQuery.s\\<\eDo\Nn[velocidade [funtfo]) 

O metodo para criar o efeito slideOownO destina-se a revelar suavemente o elemento 
seletorjQuery que ten ha se escondido anteriormente, fazendo a transi^ao de invisivel 
para visivel por meio do aumento gradativo da altura do seletorjQuery escondido. 
A altura do clcmcnto vai sctido revelada dc cima para baixo. 

O parametro velocidade admite tres valores definidos por palavras-chave, que 
sao: slow, normal e fast, para obtenv'ao das vclocidades de revela^oes lenta, normal 
e rapida respectivamente. De modo optional, a velocidade pode ser definida por 
um numero representando o tempo de revela^ao em milissegundos. 

O parametro fun<;aoc opcional e permite definir uma fungao cujo script entrara 
em a^ao tao logo seletorjQuery seja revelado. 

Excmplo dc sintaxe: 

SCdivD-slideDownCslow') 



Primeiro conhega todos os efeitos corredigos a seguire, depois, consulte a pagina 
indicada. disponivel para download no site do livro, para testa-los na pratica. 


seletorjQuery.s\ide\}p{velo(idade [fun0o]) 

O metodo slideUpO destina-se a criar o efeito de esconder o elemento seletorj¬ 
Query que tenha se revelado anteriormente. A altura do elemento e escondida no 
sentido de baixo para cima. 

Essa anima^ao apresenta o que parece ser um bug, pelo menos ate a versao 
atual da biblioteca. Quando se aplica o efeito em um elemento para o qual se 
tenha dcfinido um padding vertical, o efeito esconder ignora o padding como sendo 
integrante da altura total do elemento. Lsso causa um salto ao final da anima^ao, 
pois ao ser recolhida uma amplitude igual a altura do elemento menos o valor 
do padding, este desaparece bruscamente. Na pagina constante do site do livro,que 
demonstra esse efeito, mostra-se o suposto bug. 
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V Para soludonar o bug, em vez de declarar um paddi ng para o elemento, crie um 
di v intemo ao elemento e defina para ele margens verticals. Definir margens para 
um container intemo tern o mesmo efeito que definir padding para o container 
extemo. 

Exemplo de sintaxe: 

S('div').slideUpCslow') 


seletorj0uery.s\\6eloqq\e{velocidade [fun0o]) 

O metodo slideToggleO destina-se a causar um efeito de alternancia de visibilidadc 
do conjunto de elementos definido por seletorjQuery com o uso de efeitos causados 
por slideDown() e slideUP(). Os elementos invisiveis tornam-se visfveis e vice-versa, 
alternadamente, a cada disparo do evento. 

Exemplo de sintaxe: 

S('div').slideToggle(1500) 

Consulte o arquivo que contem o script mostrado a seguir para ver todos os 
efeitos corredi^os estudados anteriomente em a^ao: 

<style type="text/css" media="al1"> 

div {width:200px; height:300px; margin:30px 0; border:2px solid #000; 

color:#fff; background:#f00; display:none;} 

.bug {height:140px; padding:80px 0;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

S('button').eq(0).click(function() { 

SCdiv'l.eqCOl.slideDovrnCslow 1 ); 

}); 

$('button').eq(l).click(function() { 

S('div').eq(0).siideUpC'slow'); 

}); 

SC button').eq(2).click(function() { 

$('.bug').slideDown('slow'); 

}); 

$('button').eq(3).click(function() { 

SC .bug').slideUp('slow'); 

}); 

$('button').eq(4).click(function() { 

SC.alterna’).slideToggle(1500); 

}); 

}); 
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</script> 

</head> 

<body> 

<button type="button">Efeito slideDown('slow')</button> 

<button type="button">Efeito s1ideUp('slow')</buttonxbr /xbr /> 
<button type="button">BUC slideDown(’slow’)</button> 

<button type="button">BUG slideUp('slow')</buttonxbr /xbr /> 

<button type="button">Efeito s1ideToggle(1500)</button> 

<div>DIV em todo seu esplendor.</div> 

<div class="bug">DIV em todo seu esplendor.<br /> 

Com declaragao de padding</div> 

<div class="alterna">Demonstra<;ao do efeito slideTogg1e(1500).<br /> 
Clique seguidamente no botao Efeito slideToggle().</div> 
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6.3 Efeitos de opacidade 

seletorjQuery.fa d e I n (velocidade [fum;ao]) 

O mctodo fadeln() destina-se a criar o efeito de revelar o elemento seletorjQuery 
que sc tenha cscondido anteriormente, fazendo a transigao de invisivel para vi¬ 
sivel por meio do aumento gradativo da opacidade do seletorjQuery escondido. O 
elemento vai sendo revelado por mudanga de opacidade de 0 (invisivel) a 100% 
(opaco ou visivel). 

O parametro velocidade admite tres valores definidos por palavras-chave, que 
sao: slow, normal e fast, para obtengao de velocidades de revelagoes lenta, normal 
e rapida respectivamente. De modo opcional, a velocidade pode ser definida por 
um numero representando o tempo de revelagao em milissegundos. 

O parametro funfaoe opcionale permitedefinir uma fun^aocujo script entrara 
em a^ao tao logo seletorjQuery seja revelado. 

Exemplo de sintaxe: 

$('div’).fadeIn('slow') 

seletorjQuery.fa6eOut(veloddade[fun0o]) 

O metodo fadeOutO destina-se a criar o efeito de esconder o elemento seletorjQuery 
que esteja visivel, fazendo a transigao de visivel para invisivel por meio da dimi- 
nuiyao gradativa da opacidade do seletorjQuery visivel. O elemento vai sendo es¬ 
condido por mudanga da opacidade de 100% (opaco ou visivel) a 0 (invisivel). 
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seletorjQuery.U6e1o{velo(idade opaddade [ fun0o ]) 

O metodo fadeToO destina-se a alterar as conduces dc visibilidadc do elemento 
seletorjQuery , fazendo uma mudan^a gradativa da opacidade atual para a opaci- 
dade definida no parametro opacidade. Esse parametro deve ser definido por um 
numero compreendido entre 0 e 1, sendo 0 invisfvel e 1 opaco. 

Consulte o arquivo referenciado a seguir, para ver todos os efeitos de opacidade 
estudados anteriomente em ayao. 

<style type="text/css" media="air> 

div {width:150px; height:150px; position:absolute;left:30px; top:80px; 

margin:30px 0; border:2px solid #000; background:#0f0; disp1ay:none;} 

.fadeto {display:block; background:red; 1 eft:200px;} 
p {position:absolute; width:130px; left:210px; top:lOOpx;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

S(*button').eq(0).click(function() { 

S('div').eq(0).fadeln(1500); 

}); 

$('button 1 ).eq(l).click(function() { 

S('div').eq(0).fadeOut('siow'); 

}); 

$('button').eq(2).click(function() { 

$('div').eq(1).fadeTo(1500, 0.3); 

}); 

$('button’).eq(3).click(function() { 

S('div').eq(1).fadeTo(1500, 1); 

}); 

}); 

</script> 

</head> 

<body> 

<p>0ps tern algo aqui! Tudo que esta atras deste div 
e revelado quando se diminui sua opacidade. :-) </p> 

<button type="button">Efeito fadeln(1500)</button> 

cbutton type="button">Efeito fade0ut('slow')</buttonxbr /xbr /> 

cbutton type="button">Efeito fadeTo(1500, 0.3)</button> 

<button type=”button">Efeito fadeTo(1500, l)</button> 

<div>Demonstra<;ao de fadeln()/fade0ut.</div> 

<div class="fadeto"x/div> 
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6.4 Efeitos personalizados 

seletorjQuery.mmate{defini0es [velocidade] [aceleratfo] [ fun0o ]) 
seletorjQuery.m mate(defini0es [op0es]) 

O metodo animateO permite-lhe criar animagoes personalizadas para o seletorj- 
Query. Conforme mostrado, existem duas sintaxes para esse metodo. 

O princfpio basico que rege o funcionamento desse metodo e o fato de que 
somente propriedades CSS de valor numerico sao possiveis de serem animadas. 
Por exemplo: voce pode criar uma anima^ao que fa<ja um div crescer ou encolher 
em largura ou altura, alterando gradarivamente suas propriedades CSS, width ou 
height. Contudo, com o uso desse metodo, nao podera criar uma anima^ao que 
altere gradativamentc a cor de fundo do div, pois a propriedade CSS background- 
color nao e numerica. Os valores, para as propriedades CSS a animar, configuradas 
no parametro definifdes , sao os valores finais da anima^ao, isto e, a animagao se 
faz desde o valor corrente da propriedade ate o valor definido. Por exemplo: sc o 
valor inicial da largura e width:200px e voce define em sua anima^ao personalizada 
o parametro width: 50px, trata-sc de uma animayao por encolhimento. 

A partir de jQuery versao 1.2, permite-se usar unidades CSS em e %(onde 
aplicavel). Alem disso, os operadores de incremento e decremento +« e -=» sao 
validos para criar animates incrementais, como {left: '+=10px'}, que define uma 
coordenada horizontal esquerda gradarivamente crescente em saltos de lOpx. 

Existem varios plug-ins que permitem criar anima^oes, alem das permitidas 
por padrao pela biblioteca, como descrito anteriormente. Nao e o escopo deste li- 
vro examinar tais plug-ins. Serao destacadas as anima^oes-padrao que, cm resumo, 
sao aquelas que manipulam as propriedades top, left, width, height e opacity, alem 
de outras possiveis de estiliza^ao numerica,como font-size e border-width. Alem de 
valores numericos, permite-se tambem especificar o valor das propriedades com 
o uso de uma das seguintes palavras-chave: hide show e toggle. Por exemplo: 

S('div’).click(function() { 

S(this).animate( 

(opacity:'toggle', 
width:'hide'}, 

(duration:'2000'} 

); 

}); 
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O parametro velocidade c opcional c admite tres valores dcfinidos por palavras- 
chave, que sao: slow, normal c fast, para obten^ao dc vclocidadcs dc an imagoes lenta, 
normal e rapida respcctivamcnte. Dc modo opcional, a velocidade pode scr defi- 
nida por um numero representando o tempo da animagao em milissegundos. 

O parametro aceJeracao e opcional e requer o uso de plug-in para funcionar. 
Esse parametro define como sera a acelera^ao da anima^ao. Os valores linear e 
swing sao nativos. 

O parametro funcao c opcional e permite definir uma fun^ao cujo script entrara 
em a^ao tao logo a animagao termine. 

Excmplo: 


<script type="text/javascript"> 
$(document).ready(function() { 

$('button:eq(0)’).click(function() { 
$('div’)animate( 

{width:'300px', 
height:'600px', 
opacity:0.33, 

border:'lOpx dashed #f00' }, 

1500) 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Animar</button> 
<divx/div> 
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A sintaxe altcrnativa permitc-lhc definir um parametro denominado op<;6es 
que sao objetos para a animagao. Essa variantc da sintaxe admite tambem definir 
uma velocidade , uma accleraqao, uma chamada para a funqao a ser executada tao 
logo a anima^ao se complete e um parametro denominado queue que controla 
o inicio da animagao. Nos exemplos praticos que serao estudados na segunda 
parte do livro, o uso dessa sintaxe sera mais bem abordada 
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seletorjQuery.slojpO 

O mctodo stopO permite que voce intcrrompa uma anima^ao cm andamento. 
Exemplo: 


<style type="text/css" media="a11"> 

div.interna {positiomabsolute; width:80px; height:80px; border:2px solid #000; 
background:#f00; left:lOpx; top:lOOpx;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

S(document).ready(function() { 

S(’button:eq(0)').click(function() { 

$('div').aniniate({left:’+=1000px'}, 8000); 

}); 

$('button:eq(l)').click(function() { 

S('div').stopO; 

}); 

$('button:eq(2)').click(function() { 

S('div').animate({left:'-=1000px'}. 8000); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">Animar</button> 

<button type="button">Parar</button> 

<button type="button">Voltar</button> 

<div class="interna"x/div> 
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CAPITULO 7 

Fun^oes utilitarias 


Neste capitulo, serao examinadas as fungocs utilitarias dispomveis na bibliotcca 
jQuery. Uma fungao e dita utilitaria quando desenvolvida para atender a ncces- 
sidadcs especificas dc um projeto. Em geral, uma fun^ao utilitaria, ao contrario 
de um metodo jQuery, destina-se a manipular objetos JavaScript que nao sejam 
elementos do DOM ou realizar operates nao especificas a objetos. 


7.1 Introdu^ao 

Nos capitulos anteriores, estudaram-se os metodos jQuery Denominou-se ge- 
nericamente de metodos jQuery todos os metodos e fun^oes possiveis de serem 
aplicados a um conjunto de elementos do DOM. For exemplo: quando se estuda 
o metodo para adicionar estilos aos paragrafos de um documento, mostra-se a 
sintaxe a seguir: 

$('p').css({propriedade:'valor', propriedade:'valor', ...}) 

O construtor $() seleciona um conjunto de elementos, no caso do exemplo 
os paragrafos constantes da arvorc do documento - o DOM c ncles aplica as 
regras CSS definidas no metodo css(). 

Convent rcssaltar a caracteristica de encadeamento propria da bibliotcca 
jQuery que permite encadear metodos, unindo-os com um ponto (.). Na cadeia 
formada pcla uniaode metodos com um ponto, cada adi^aode um metodo rctorna 
um objeto pronto para reccbcr novo metodo, cm um processo sent fim. 

Outro aspecto importante a nao esquecer e a caracteristica de sele^ao multipla 
automatica, isto e, a seleyao feita pelo construtor $0 compreende um conjunto 
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dc elcmcntos-alvo, scm ncccssidade dc criar loops dc selegao, como ocorrc na 
linguagem JavaScript formal. 

Para fins dc estudo, as fungoes utilitarias serao classificadas cm dois grupos: 

■ fungoes utilitarias nativas da biblioteca jQuery; 

■ fungoes utilitarias pcrsonalizadas. 

As fungoes utilitarias para uso pcrsonalizado dcpcndcm das particularidadcs 
dc cada desenvolvimento c, por isso mesmo, fogcm do cscopo deste livro. Serao 
enfatizadas as fungoes utilitarias nativas da jQuery Contudo, ao final do capitulo, 
uma simples fungao utilitaria personalizada sera desenvolvida com o objetivo de 
mostrar a tecnica de criagao de tais fungoes. 


7.2 Flags para agentes de usuario 

Tecnicamente, as flags para agentes de usuario sao variaveis e nao propriamen- 
te fungoes. Destinam-se a detectar informagoes sobre o navegador usado pelo 
usuario. 

Os scripts de deteegao das caracterfsticas do navegador foram amplamente 
empregados cm construgao de sites, com a finalidade de tomar decisoes de como 
servir codigos em f ungao do suporte oferecido por navegadores de diferentes 
fabricantes. 

Esta e uma pratiea em desuso segundo os modernos conceitos de desen- 
volvimcnto. Nao sc ira discorrer longamcnte sobre as razocs para evitar o uso 
de scripts de deteegao, mas vale lembrar urn dos principios fundamentals dos 
Padrocs Web que estabclcce a criagao de codigos indepedentes de navegadores 
c plataformas. 

Entao, e licito perguntar: por que jQuery inclui em sua biblioteca essas fun- 
cionalidadcs dc deteegao? A resposta e simples: a ferramenta esta dispomvcl, 
evite usa-la, esgote todas as alternativas a seu uso, mas se seu projeto reveste-se 
de condicionantes e caracterfsticas que justifiquem seu uso, utilize-as. 

jQuery.bromer 

Compreende um conjunto de flags referetites a versao e a famflia do navegador. 
As flags sao as relacionadas a seguir. 
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Flag Descrigao 

msie Rcrorna true sc o navegador e identificado como Microsoft Internet 

Explorer. 

mozilla Retorna true se o navegador e identificado como Firefox, Camino, 
Netscape ou outro baseado no Mozilla. 

safari Retorna true se o navegador e identificado como Safari, OmniWeb 

ou outro baseado no Safari. 

opera Retorna true se o navegador e identificado como Opera, 

version Retorna a versao da engine de renderizafao do navegador. 

Convem ressaltar que a detcc^ao se faz para uma determinada fami'lia dc 
navegadores e nao para um navegador espcdfico. A detecyao se faz por fa mi lias 
baseadas no pressuposto de que navegadores pertencentes a uma mesma fami'lia 
possuem caractensticas identicas. A maioria dos navegadores modernos enqua- 
dra-se em uma das quatro fann'Iias citadas anteriormente. 

A flag version dctecta a versao da engine de rcndcriza^ao e nao a versao do 
navegador, como podc parccer a primeira vista. 

No exemplo a seguir,apresentamos um script para a detec^aodas flags version 
e fami'lia do navegador: 

<script type="text/javascript’' src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

S(document).ready(function() { 

SC'.versao’).dick(function() { 

var SversaoNavegador = $.browser.version; 

S('p').append(’A versao da engine de renderiza<;ao deste navegador e: <b>' 
+ SversaoNavegador + ’</bxbr />’); 

if (jQuery.browser.nozilla) { 

SOp^.appendOEste navegador pertence a fami'lia: <b>Mozil1a</bxbr />')} 
else if (jQuery.browser.usie) { 

S('p').append('Este navegador pertence a fami 1ia: 

<b>Microsoft Internet Explorer</bxbr />’)} 
else if (jQuery.browser.safari) { 

S(’p').append('Este navegador pertence a familia: <b>Safari</bxbr />')} 
else if (jQuery.browser.opera) { 

S('p').append('Este navegador pertence a familia: <b>Opera</bxbr />') 

} else { 

$('p').append('Nao foi possivel identificar a que familia pertence 
este navegador.')}; 

}); 
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$('.reset').click(function () { 

S('p’).empty(); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button" class»"versao">Flags deste navegador</button> 
<button type="button" c1ass="reset">Reset</button><br /> 

<p></p> 



[arquivo-7.2a.html] 


jQuery. boxModel 

Denomina-se Box Model um modelo-padrao de renderiza^ao ou apresentagao 
visual de um box segundo a forma ta^ao CSS preconizada pclas rccomcndagoes 
do W3C. Observe, na figura 7.1, um diagrama esclarccendo o Box Model. 



Bottom 


Figure 7.1 - Box Model. 

Neste diagrama, dcstaeou-se uma area mais interior denominada area dos 
conteiidos, cujas dimensocs (largura c altura) sao definidas pelas propriedadcs 
CSS width c height. Segue-sc uma area denominada cnchimento, cuja espessura c 
definida pela propriedade CSS padding. 

Em volta do enchimento, ha uma borda cujas espessura e cor e cujo tipo sao 
definidos pela propriedade CSS border. Finalmente, ha um espago denominado 
margem,com espessura definida pela propriedade CSS margin. 
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A area da margem c sempre transparente. As dimensoes da area dc contcudos 
dependem de uma serie de fatores, entre elcs, defini<;ao explicita de dimensoes, 
natureza e tipo de conteudo. A propriedade CSS background define o fundo a ser 
aplicado nas areas de conteudos, de enchimento e da borda. 

Este e o modelo-padrao do W3C. Contudo, os navcgadorcs Internet Explorer, 
versoes para Windows anteriores a versao 6 e tambem as versoes 6 e 7, quando 
renderizam em modo kirks, nao seguem o modelo-padrao e adotam uma forma- 
tagao conhecida como “Box Model quebrado”. 


Diz-se que um navegador rendenza em modo kirks quando da marcag§o HTML 
nao consta a declaragao de DOCTYPE ou ha uma declaragao de DOCTYPE em 
desacordo com aquelas padronizadas pelo W3C. Em oposigao ao modo kirks, 
ha a chamada renderizagao em modo standard. 


O Box Model quebrado considera as dimensoes CSS width e height como totais, 
ou seja, nelas estao induidos os valores de padding e border. As margenscontinuam 
exteriores ao box. 

Observe, na figura 7.2, um diagrama dos dois Box Models. 

lap 
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Margin 
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Figura 7.2 - Box Models standard e quebrado. 
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No cxcmplo a scguir, ha urn script para a detccgao do Box Model adorado 
pclo navegador: 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

S(document).ready(function() { 

S('.versao').click(function() { 
if (jQuery.boxHodel == true) { 

S('p').append('Este navegador adota o Box Model: <b>Standard</b>.')} 
else if (jQuery.boxModel == false) { 

$('p').append('Este navegador adota o Box Model: <b>Quebrado</b>.') 

} else { 

S('p').append('Nao foi possivel identificar o Box Model adotado por este 
navegador.')}; 

}); 

SC.reset').dick(function() { 

SCp’j.emptyO; 

}); 

}); 

</script> 

</head> 

<body> 

ebutton type="button" class="versao">Box Model deste navegador</button> 

<button type="button" class=”reset">Reset</button><br /> 

<px/p> 



[arquivo-7.2b.html] 


Faga uma copia do arquivo-7.2b.html mostrado no cxcmplo c retire a declaragao 
dc DOCTYPE da marcagao. Visualize a copia em qualquer versao do Internet 
Explorer, rode o script de deteegao do Box Model e observe o valor retornado 
para o Box Model. 


7.3 Operates com arrays e objetos 

jQuery.each(oty'e(o funtfo[chave oil indice valor)) 

Esta fungao utilitaria permite fazer intcragoes tanto por um conjunto de clcmcn- 
tos da arvore do documento como pelos elementos de um array. O parametro 
objeto define uma colegao de objetos ou um array no qual sera feita a interagao e 
o parametro fun<;ao define a agao sobre cada um dos itens da interagao. 
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Esta fun^ao difcrc do mctodo each() cstudado cm [C2 S2.1], pois enquanto 
tal mctodo faz intera^oes exdusivamente cm objctos jQuery, esta fu^ao utilitaria 
tern uma abrangencia mais ampla, pcrmitindo intera^ao cm qualquer cntidadc 
da linguagem, incluindo arrays. 

O paramctro funfao admite dois parametros: o primciro paramctro e uma chave 
(key), no caso de intera^oes por objetos, ou um indice (index), no case de interacts 
por arrays, e o segundo parametro, o valor da chave ou fndice. 

Para exemplificar, sera reescrito o script para deteegao da versao e familia do 
navegador desenvolvido no arquivo-7.2a.html mostrado anteriormente. Nesse script, 
utiliza-sc uma seric dc metodos condicionais para testar a familia do navegador. 
Usar a fun^ao each() fornece uma solugao bem mais elegante e concisa. 

Assim, aplica-se intcra^ao no objeto jQuery.browser que rctornara os pares versao: 
numero c familia:booleano true/false. 

Exemplo: 


<script type="text/javascript"> 

$(document).ready(function() { 

$C.versao’).click(function() { 

jQuery.each(jQuery.browser, function(i, val) { 

$(’p').append(i + ’ : <b>' + val + '</bxbr />'); 

}); 

}); 

$('.reset').click(function() { 

$('p').empty(); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button" class="versao">Flags deste navegador</button> 
<button type="button" c1ass="reset">Reset</button><br /> 

<px/p> 



[arquivo-7.3a.html] 
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j Query.g rep [array fun0o(valor indice) [in verter ]) 

Esta funyao permite fazer interayoes pclos elcmcntos de um array e filtra-los. O 
parametro array define o array no qual sera feita a intcrayao e o parametro funyao 
define uma ayao de filtragem dos elementos do array. 

O parametro funyao ad mite dois parametros: o primeiro parametro e o valor 
de cada elemento do array e o segundo parametro, seu respectivo indice. Note 
que esses dois parametros estao em ordem inversa aqueles do metodo each(), 
cstudado em [C2 S2.1]. 

O parametro inverter e facultativo e booleano, sendo o valor-padrao false. 
Quando definido para true, a funyao rctorna os valores falsos do filtro definido 
na funyao. 

Para excmplificar, considere um array cujos elmentos sao numeros c aplique 
nele a funyao jQuery .grep() em quatro etapas sucessivas, com a final id ad e de melhor 
esclarecer seu funcionamenta As etapas sugeridas sao as seguintes: 

■ definir um array de numeros; 

■ cxcluir do array as ocorrencias do valor 3; 

■ no array resultante, excluir as ocorrencias entre os indices 2 e 4; 

■ no array resultante, cxcluir as ocorrencias de valores maiores que 7 e o 
indice 2. 

Exemplo: 

<script type="text/javascript" src=”../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('.versao’).click(function() { 

var arr = [ 4, 3, 1, 9, 6, 8, 0, 2, 7, 3, 4, 8, 7, 1, 9 ]; 

S('#uin , ).append('<p>' + arr.join('- ') + '</p>'); 

arr = jQuery.grep(arr, function(val, i) { 
return (val != 3); 

}); 

$('#um').appendC’<p>’ + arr.join('- ') + ’</p>'); 

arr ■ jQuery.grep(arr, function(val, i) { 
return (i < 2 || i > 4) 

}); 

$('#um , ).append('<p>' + arr.join('- ') + '</p>'); 

arr = jQuery.grep(arr, function(val, i) { 
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return (val <= 7 SA i != 2) 

}); 

S( , #um , ).append('<p> , + arr.join('- ') + *</p>'); 

}); 

$('.reset').c1ick(function() { 

$('#um').empty(); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button" class="versao">jQuery.grep()</button> 
<button type="button" class="reset">Reset</buttonxbr /> 
<div id="um"></div> 



[arquivo-7.3b.html] 


jQuery.makeArray(o£y'ero) 

Esta funyao transforms qualquer conjunto de objetos ern um array. O metodo 
mostrado a seguir coleta o conteudo de todos os divs do documento e cria um 
array cujos clementos sao esses contcudos. 

var arr = jQuery.fnakeArray('div') 

E improvavel que voce precise usar essa fun^ao utilitaria uma vez que a bi- 
blioteca jQuery dela se utiliza nativamente. Lembre-se de que todos os objetos 
jQuery retornam um conjunto de clementos. 

jQuery.ma p(array fun0o{ valor indice)) 

Esta fun^ao permite mapear os clementos de um array e construir, com base 
nelcs, um novo array O parametro array define o array a mapear c o parametro 
funcao , uma opera<;ao sobre os elementos mapeados com o objetivo de obter os 
elementos do novo array. 

O parametro funcao admite dois parametros: o primeiro parametro e o valor de 
cada elemento do array e o segundo parametro, seu respectivo indice. 

No exemplo a seguir, ha um array cujos elementos sao letras do alfabeto e a 
partir dele se construira um novo array cm tres ctapas, conformc discriminadas 
a seguir: 
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■ definir um array dc Ictras minusculas; 

■ mapear e construir um novo array alterando as letras para maiusculas e 
acresentando o in dice a cad a cl cm onto; 

■ mapear o array resultante e construir um novo array cujos elementos serao 
acrescidosde um sinal asterisco (*) imediatamente seguido pcla divisaodo 
l'ndice do elemento por cinco. 

Exemplo: 


<script type="text/javascript"> 

S(document).ready(function() { 
S('.versao').c1ick(function() { 

var arr = [ e , g , n , j , v , a , j , m , 
$('div').append('<p>' + arr.join(' - ') + '</p>'); 

arr = jQuery.map(arr, function(val, i) { 

return (val .toUpperCaseO + i*3); 

}); 

$('div , ).append(’<p>' + arr.join(' - ') + ’</p>'); 

arr = jQuery.mapCarr, function(val, i) { 

return (val + + (i/5)) 

}); 

S('div').appendC*<p>’ + arr.join(' - ') + ’</p>'); 

}); 

$('.reset').dick(function() { 

$('div’).empty(); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button" class= ,, versao">jQuery.map()</button> 
<button type="button" class="reset">Reset</button><br /> 
<divx/div> 

[arquivo-7.3c.html] 
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y'0uery.inArray(ra/or array) 

Esta fun^ao permite inspecionar os elemcntos de um array e verificar se um 
determinado elemcnto a ele pertcnce. 

O parametro valor e o elemento do array cuja existencia se quer verificar e o 
segundo parametro, array, e o nome do array a inspecionar. 

O valor retornado e o fndice da primeira ocorrencia do elemento pesquisa- 
do, caso scja encontrado no array. C.aso nao scja cncontrado, sera rctornado o 
numcro -1 (um ncgativo). 

Exemplo: 


<script type="text/javascript"> 

S(document).ready(function() { 

$('.versao').click(function() { 

var arr = [ 'site 1 , 'maujor', ’h’. 2, 'jquery', 105, 'leitor', 'xpto' ]; 
S('div').append('<p>' + arr.joinC, ') + '</p>’); 

var resUm = jQuery.inArray('maujor', arr) 

$('div').append('<p>Procura por maujor resultou indice: <b>' + resUn + '</bx/p>'); 
var resDois = jQuery.inArray(105, arr) 

SCdiv’J.appendC^Procura por 105 resultou indice: <b>' + resDois + ’</b></p>'); 
var resTres = jQuery.inArrayCLEITOR 1 , arr) 

$('div').append('<p>Pnocura por LETTOR resultou indice: <b>' + resTres + '</bx/p>'); 

S('.reset').click(function() { 

S(’div').empty(); 

}); 

}); 

}); 

</script> 

</head> 

<body> 

cbutton type="button" class="versao">jQuery.inArray()</button> 

<button type="button" class="reset">Reset</button><br /> 

<divx/div> 


♦1 [arquivo-7.3d.html] 
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yOwery. unique (array) 

Esta funyao remove os elementos cjue tenham sido anteriormente duplicados 
(ou clonados) cm um array constituido de elementos da arvore do documento 
e retorna o array sem as duplicatas. 

O parametro array c o array a inspecionar, retirado da arvore do documento. 
Essa funyao e de uso restrito e provavelmente voce nao ira utiliza-la cm seus 
projetos de desenvolvimento de sites. A exemplificayao requer o desenvolvimento 
de marcayao e script bastante cspecificos e, tendo em vista o pouco valor pratico 
retornado em um exemplo, limitamo-nos apenas a citar a funyao. 


7.4 Teste de funyao 


jQuery. isFunction(objeto) 

Esta funyao permite inspecionar um objeto qualqucr passado no parametro objeto 
e retorna true se o objeto c uma funyao, caso contrario retorna false. 

Exemplo: 


<script type="text/javascript”> 

$(document).ready(function() { 

$('.versao').click(function() { 

function maujorO {}; 

var objetos = ( maujor, 'site', null, false, 'div', functionO {}, 105 ]; 
SCdiv^.appendC^' + objetos.join(', ') + ’</p>’); 

jQuery.each(objetos, function(i) { 

var resultado = jQuery. isFunction(objetos[i]); 

S('span:eq(’+ i +')').html(’<b>’ + resultado + ' </b> ’) ; 

}); 

S('.reset’).click(function() { 

$('div, span').empty(); 

}); 

}); 

}); 

</script> 

</head> 
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<body> 

<button type="button" class=”versao">jQuery.isFunction()</button> 
<button type="button" class*="reset">Reset</buttonxbr /> 
<divx/div> 

<spanx/span> 

<spanx/span> 

<spanx/span> 

<spanx/span> 

<spanx/span> 

<spanx/span> 

<spanx/span> 



[arquivo-7.4a.html] 


7.5 Opera^ao com string 


jQuery.Xr\m{string) 

Esta fungao remove os espa^os cm branco existences antes e depois de uma string. 
O parametro string e a string contendo os espayos a remover. 

Exemplo: 


<script type="text/javascript"> 

$(document).ready(function() { 

$('button').click(function() { 

var minhaString = ” Foi lan<;ado o livro jQuery do Maujor. 
alertCString antes do trim:\n\n'” + minhaString + 

minhaString = jQuery.trim(minhaString); 
alertCString depois do trim:\n\n"' + minhaString + 

}) 

}); 

</script> 

</head> 

<body> 

<button type="button">jQuery.trim()</button> 



[arquivo-7.5a.html] 
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7.6 Fun0es utilitarias personalizadas 

Fun^oes utilitarias personalizadas sao aquelas criadas pelo desenvolvcdor para 
suprir necessidades especificas de um determinado projeto ou projetos. Concei- 
tualmente, pode-se dizer que um conjunto de fundoes utilitarias personalizadas 
constitui tuna biblioteca particular que o desenvolvedoremprega para simplificar 
a realizable de tarefas repetitivas em sett projeto. 

Neste item do capttulo, sera criada uma tunyao utilitaria simples, com o ob- 
jetivo de mostrar a tecnica envolvida no desenvolvimento de tais fun^oes, para 
o emprego em conjunto com a biblioteca jQuery. 

Sabe-se que o alias da biblioteca jQuery e S e tambem que varias outras 
bibliotecas o empregam. Em um desenvolvimento que utilize exclusivamente a 
biblioteca jQuery, c seguro usar esse alias na sintaxe dos metodos, sent prever 
mecanismos adicionais para prevenir conflitos. 

Mesmo que voce esteja desenvolvendo seu projeto com exclusividade de uso 
para a biblioteca jQuery, e de boa pratica prevenir conflitos, pois nada garante 
qtte futuramente seu projeto venha a scr atualizado ou expandido e voce ou ou- 
tro desenvolvedor tenha que implantar uma outra biblioteca no projeto. Adote 
como regra nao confiar no uso do alias $ sem um mecanismo de prevengao de 
conflitos. 

O primeiro mecanismo e substituir o alias S por jQuery. Por exemplo: 

$.isFunctionO e substituido por jQuery.isFunction(). 

Em pcquenos scripts, essa solu^ao e satisfatoria, contudo, em scripts maiores, 
a grande quantidade de substitutes de S por jQuery acaba por despender tempo, 
aumentar o trabalho de digita^o e complicar o codigo. 

O segundo mecanismo, para nao perder a simplicidade do alias S, consiste 
no uso do metodo S.noConflictO estudado em [C2 S2.11. 


7.6.1 Sintaxe geral 

Observe a fun^ao mostrada que se destina a criar uma caixa de alerta contendo 
o texto passado no parametro alerta: 

$.alerta * function(alerta) { 
alert(alerta); 

} 
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Trata-se dc uma fungao urilitaria muito simples, destinada a scr usada com a 
biblioteca jQuery, mas potencialmente conflitante com outras bibliotccas. Vcja a 
seguir duas formas de chamada para essa fun^ao: 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javasc ript"> 

$(document).ready(function() { 

S.alerta = function(texto) { 
alert(texto); 

} 

SC button:eq(0)').click(function() { 

S.alerta('Alerta con uso de S.alerta'); 

}); 

S('button:eq(1)').click(function() { 

jQuery.alerta('Alerta com uso de jQuery.alerta'); 

}); 

}); 

</script> 

</head> 

<body> 

<button type="button">S.alerta</button> 

<button type="button">jQuery.alerta</button> 



[arquivo-7.6.1a.html] 


A primcira forma dc chamada da fun^ao utiliza a sintaxc S.alerta c e poten¬ 
cialmente conflitante; a segunda forma c mais scgura e cvita conflitos usando 
jQuery.alerta. Esse simples exemplo mostra na pratica o uso das duas sintaxes de 
chamada de uma fun^ao jQuery. 

Mas, como usar o alias $ sem o risco de conflitos? Seria otimo se isso fosse pos- 
sivel, nao e mesmo? E e possfvel. A sintaxe JavaScript permite passar jQuery como 
se fosse um parametro de substituiyao ao alias S conforme mostrado a seguir: 

(function(S) { 

// Aqui vai o script da fun<;ao personalizada 
})(jQuery); 


Adotando essa sintaxe para escrever a fun^ao, havera seguran^a de que o alias 
S nao sera usurpado por outras bibliotccas. 
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A fungao S.alerta devera scr rcccscrita assim: 
(function(S) { 

S.alerta = function(textoAlerta) { 
alert(textoAlerta); 

} 

})(jQuery); 


7.6.2 Fun$ao S.corTexto 

Para sedinientar os conceitos de criagao dc fungoes personalizadas, sera desen- 
volvida comocxcmplo uma fun^ao dcnominada S.corTexto, dcsdnada a mudara 
cor do texto dc elementos cm uma pagina web. 

Em uma primeira etapa, cria-sc a fumjao para mudar a cor dc textos dc pa- 
ragrafos c, a seguir, aperfei^oa-se a fun^ao para mudar sclctivamcnte a cor dc 
outros elementos da pagina. 

Nao ha preocupa^ao com o valor pratico da fun^ao, uma vcz que o objetivo 
e exemplificar conceitos de cria^ao de fun^oes utilitarias. 

Observe o codigo a seguir: 

1. (function(S) { 

2. S.corTexto = function(e, cor) { 

3. var el = document.getElementsByTagName(e); 

4. for (var i = 0; i < el.length; i++) { 

5. el[i].style.color * cor; 

6 . } 

7. } 

8. })(jQuery); 


Codigo comentado: 


Linha(s) 
Linhas 1 e 8 

Linha 2 

Linha 3 

Linha 4 

Linha 5 


Descri^ao 

Afun£aoest4contidadentrodefunction(S),destacadaem negrito, 
conforme a sintaxe estudada no item anterior. 

A fungao admite o parametro e, que define o elemento, c o pa- 
rametro cor, que define a cor a ser adotada para o elemento. 

Cria-se uma variavel dcnominada el quearmazena,em um array, 
todos os elementos e existentes na pagina. 

Cria-se um loop para percorrer os elementos armazenados na 
variavel el. 

Aplica-se uma regra de estilo definindo a cor passada no para- 
metro cor para todos os elementos el. 
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Tal fungao esta pronta para uso, conformc mosrrada a scguir: 


<script type="text/javascript"> 

S(document).ready(functionO { 

Cfunction(S) { 

S.corTexto = function(e, cor) { 
var el ■ document.getElementsByTagName(e); 
for (var i = 0; i < el.length; i++) { 
el[i].style.color = cor; 

} 

} 

D(jQuery); 

$('button:eq(0)').click(function() { 

S.corTextoCp', '#ff0000'); 

}); 

S(’button:eq(l)’).click(function() { 

jQuery.corTextoC'p’, 'lOOOOff'); 

}); 

S('button:eq(2)').click(functionC) { 

S.corTextoCp', '#00cc00'); 

}); 

$('button:eq(3)').click(functionC) { 
jQuery.corTexto('p', "); 

}); 

}); 

</script> 

</head> 

<body> 

<span>Escolha uma cor para os paragrafosx/spanxbr /> 

<button type="button">Verinelha</button> 

<button type="button">Azul</button> 

<button type="button">Verde</button> 

<button type="button">Default</button> 

<p>Paragrafo um</p> 

<p> Paragrafo dois</p> 

<p> Paragrafo tres</p> 

♦J [arquivo-7.6.2a.html] 

Tendo cntcndido c consultado o arquivo quc dcmonstra o funcionamento 
dcssa fun^ao, talvcz voce esteja se questionando do porque de todo este trabalho 
se se pode usar simplesmente SCp'J.cssCcolor’, ’#xxxxxx') com um valor #xxxxxx 
para cada um dos botoes de mudanga de cor? 
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E vcrdadc. Sc a fungao terminasse aqui, nao tcria valor pratico algum, pois 
sc lirnitou a replicar com mais codigo urn metodo nativo. E fungoes utilitarias 
nao sc dcstinam a substituir metodos nativos, e sim complementa-los ou suprir 
suas faltas. 

Assim sendo,adicionecerta flexibilidade a essa fungao, justificando sua criagao, 
ainda que de uso limitado, pois como se disse, o objetivo e mostrar a sintaxe e 
fundamentos de criagao de fundoes nativas. 

Que tal se cm vez de clicar um botao para mudar a cor dos paragrafos, voce 
tivessc um menu de selegao de cores de modo que toda vez que o usuario sele- 
cionasse uma cor, houvcse mudanga sem nccessidade dc cliques? 

Retire os botoes da pagina e coloque um menu de opgoes de cores, conforme 
mostrado a seguir: 

<form action="" ntethod=""> 

<label>Escolha uma cor para os paragrafosebr /> 

<select id="selecionaCor”> 

<option value="#999999">Default</option> 

<option value="#FF0000">Vermelha</option> 
coption value="#0000FF">Azul</option> 

<option value="#00CC00">Verde</option> 

</select> 

</label> 

</form> 

Nao ha muito o que comentar sobre a marcagao do menu de selegao. Note 
a definigao do id="selecionaCor" para o elemento select e a opgao de cor default 
#999999, supondo que esta e a cor-padrao adotada para os paragrafos da pagina 
e definida por regra CSS. 

Nessa nova solugao, a cor sera coletada do menu de selegao e nao mais passada 
como um parametro da fungao, como era na solugao anterior. Assim, tal fungao 
tera apenas o parametro el e sera necessario informar qual foi a cor escolhida 
pelo usuario no proprio corpo da fungao. 

Observe as modificagdcs introduzidas na fungao: 

1. (function(S) { 

2. S.corTexto = function(e) { 

3. var selecao = document.getElementByldCselecionaCor'); 

4. var indiceSelecao = selecao.selectedlndex; 

5. sel = selecao.options[indiceSelecao].value; 

6. var el = document.getElementsByTagName(e); 
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7. for (var i = 0; i < el.length; i++) { 

8. el[i].style.color = sel; 

9. } 

10 . } 

11. })(jQuery); 

Codigo comentado: 

Linha(s) Descri^ao 

Linha 2 A funyao requer apenas um parametro, ja que a cor sera passada 

pelo menu de seleyao. 

Linha 3 Cria-sc uma variavel denominnda selecao que armazena o elemento 
select com id="selecionaCor". 

Linha 4 Recolhe-se o l'ndice da cor selecionada na variavcl indiceSelecao. 
Linha 5 Armazena-se a cor escolhida na variavel sel. 

Linha 8 Informa-se que a cor a ser aplicada e aquela armazenada na variavel 
sel, que, por sua vez, foi a escolhida pelo usuario. 

Nessa nova soluyao, tao logo o usuario escolha a cor,esta sera automaticamente 
aplicada aos paragrat'os, sem necessidade de clicar um botao. 

A seguir, o script completo dessa soluyao: 

<style type="text/css" media="all"> 
p {color:#999;} 

</style> 

<script type="text/javascript" src«"../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

$(document).ready(function() { 

(function($) { 

S.corTexto = function(e) { 

var selecao = document.getElementByldCselecionaCor'); 
var indiceSelecao = selecao.selectedlndex; 
sel = selecao.options[indiceSelecao].value; 
var el = document.getElementsByTagName(e); 
for (var i = 0; i < el.length; i++) { 
el[i].style.color = sel; 

} 

} 

JHjQuery); 

S('#selecionaCor').change(function() { 

S.corTexto('p'); 

}); 

}); 

</script> 

</head> 
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<body> 

<form action="" method=""> 

<labe1>Escolha uma cor para os paragrafoscbr /> 
<select id="selecionaCor"> 

<option value="#999999">Default</option> 
<option value="#FF0000">Vermelha</option> 
<option value="#0000FF">Azul</option> 

<option value="#00CC00">Verde</option> 
</se1ectx/label> 

</form> 

<p>Paragrafo um</p> 

<p>Paragrafo dois</p> 

<p>Paragrafo tres</p> 



[arquivo-7.6.2b.html] 


Voce seria capaz de dizer se os resultados obtidos com essa soluyao podem ser 
conseguidos com metodos nativos do jQuery? Tal desafio foi lanfado como exercfcio 
prarico. Encontrou uma solu^ao? Postc na area dc comentarios do site do livro. 

Que tal incrementar mais um pouco essa fun^ao permitindo c|ue o usuario 
escolha, alem da cor, os elementos que devam ser afetados pela escolha? 

As modifica^ocs a introduzir no script sao as descritas a scguir. 

■ Criar botoes para selecionar cada elemento a mudar de cor e um botao 
para selecionar todos os elementos a mudar de cor: 

<button type="button">Paragrafos</button> 
cbutton type="button">Cabe<;alhos</button> 

<button type="button">Listas</button> 

<button type="button">Tudo</button> 


■ Criar nova marca^ao para a pagina que contem os elementos a mudar de 
cor: 

<h2>Cabe<;alho nivel 2</h2> 

<p>Paragrafo um</p> 

<p>Paragrafo dois</p> 

<p>Paragrafo tres</p> 

<h2>Cabe<;a1ho nivel 2</h2> 

<ul> 

<li>Item um</li> 

<li>Item dois</li> 

<li>Item tres</li> 

</ul> 

<p>Paragrafo</p> 

<h2>Cabei;alho nivel 2</h2> 
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■ Rcrirar o disparador dc mudanga dc cor do clcmcnto select c atribui-lo aos 
botocs: 

$('button:eq(0)').click(function() { 

S.corTexto('p'); 

}); 

SC button :eq(l) ').dick(function() { 

]Query.corTexto(’h2’); 

}); 

SC'button:eq(2)').click(function() { 

S.corTextoCli’); 

}); 

S('button:eq(3)').click(function() { 

jQuery.corTextoC*'); 

}); 

Com cssas modificagoes, chega-sc a uma tcrccira solugao para a fungao pcr- 
sonalizada cujo funcionamento pode ser visto no arquivo a seguir. 

♦J [arquivo-7.6.2c.html] 

Modifiquc tal fungao criando outro clcmcnto select para permitir ao usuario 
cscolhcr o clcmcnto a mudar dc cor, tal como sc fez para a escolha da cor. Esse 
novo select substituira os botoes de selegao dos elementos. A tecnica e identica 
a adotada anteriormente para o select de cores e a modificagao em rela<;ao ao 
script anterior e mostrada a seguir: 


<script type="text/javascript"> 

$(document).ready(function() { 

(function(S) { 

S.corTexto = function() { 

var selecaoCor = document.getElementByld('selecionaCor'); 
var indiceSelecaoCor = selecaoCor.selectedlndex; 
var selCor = selecaoCor.options[indiceSelecaoCor].value; 
var selecaoElemento = document.getElementByld('selecionaElemento'); 
var indiceSelecaoElemento = selecaoElemento.selectedlndex; 
var selElemento = selecaoElemento.options[indiceSelecaoElemento].value; 
var el = document.getElementsByTagName(selElemento); 
for (var i = 0; i < el.length; i++) { 
el [i].style.color = selCor; 

} 

} 

})(jQuery); 
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$('button').click(function() { 
S.corTextoO; 

}); 



[arquivo-7.6.2d.html] 


7.6.2.1 Melhorando a funtfo s . corTexto 

Como voce deve ter acompanhado no desenvolvimento da fun^ao personalizada 
S.corTexto, extraiu-se o valor que o usuario entrou no campo de sele^ao para a 
cor, cm tres etapas distintas a saber: 

■ uso do metodo document.getElementById para selecionar o elemento select; 

■ uso de selectlndex para capturar o indice da sele^ao; 

■ uso de value para capturar o valor selccionado pclo usuario. 

Para a sele^ao do elemento, a tccnica usada foi identica. 

Uma analise atenta da solu^ao proposta mostra que esta e falha e deve ser 
melhorada. Note que se utilizou urn metodo JavaScript sem testar seu suporte 
pclo navegador. As boas praticas de programa^ao recomendam a seguinte veri- 
fica^ao para o metodo usado: 

if ((document.getElementByld) { 
return false; 

} 

Isto assegura que o navegador nao tentara cxecutar o codigo caso nao oferc^a 
suporte para o metodo. Alem disso, continua-se tal desenvolvimento usando 
metodos JavaScript nao especificos a biblioteca jQuery. 

Realizou-se tal a^ao propositadamente, pois e comuin com desenvolvedores 
familiarizados com JavaScript cometer o equivoco de inserir metodos tradicio- 
nalmente usados naquela programayao, sem se preocupar com a portabiliade 
e o suporte adequado para o metodo. Quanto mais tamiliarizado estiver com a 
biblioteca, tanto mais facil sera encontrar a alternativa para o codigo JavaScript 
nao jQuery. Isto nao significa que voce esta proibido de usar a sintaxe da lingua- 
gem JavaScript em seus desenvolvimentos com a biblioteca jQuery, ao contrario, 
use sempre que ncccssario, mas assegure-se de nao estar poluindo seus scripts 
com metodos em desacordo com a filosofia da biblioteca. 
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Vocc sc lembra do sclctor :selected estudado cm [C2 S2.2.9]? c do mctodo val() 
estudadoem [C3 S3.5]? Pois bcm,essas duasfuncionalidadesda bibliotcca,alcm 
dc compactar o codigo da fun^ao personal izada, oferecem uma solu^ao bem mais 
robusra e cm conformidadc com os fundamentos de jQuery, sem a nccessidade 
dc verificar compatibilidades. 

Veja a seguir a alternativa para a segunda etapa de desenvolvimento da funyao. 
O arquivo arquivo-7. 6 . 2b.html que representa tal etapa foi reescrito como mostrado 
a seguir: 

<style type="text/css" media="all"> 
p {color:#999;} 

</style> 

<script type="text/javascript" src=”../jquery-1.2.6.js"x/script> 

<script type="text/javascript"> 

S(document).ready(function() { 

$('select').change(function() { 

$('option:selected').each(function() { 

SC'p'l.cssCcolor', S(this).valO); 

}); 

}); 

}); 

</script> 

</head> 

<body> 

<form action=”" method="”> 

<label>Escolha uma cor para os paragrafos<br /> 

<select id="selecionaCor”> 

<option value="#999999">Default</option> 

<option value="#FF0000">Vermelha</option> 

<option value="#0000FF">Azul</option> 

<option value="#00CC00">Verde</option> 

</select> 

</label> 

</form> 

<p>Paragrafo um</p> 

<p>Paragrafo dois</p> 

<p>Paragrafo tres</p> 

♦ [arquivo-7.6.2.1a.html] 


Material com direitos autorais 



208 


jQuery ■ A Biblioteca do Programador JavaScript 


E, a scguir, a altcrnativa para a tcrccira ctapa dc desenvolvimcnto da f 1111910 . 
O arquivo arquivo-7.6.2c.html quc rcprcscnta cal ctapa foi reescrito como mostrado 
a scguir: 

<style type="text/css M media="all"> 

* {color:#999;} 
p {margin:2px 0;} 
form {display:inline;} 
select {width:105px;} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type=”text/javascript"> 

$(document).ready(function() { 

(function($) { 

S('select').change(function() { 

S('option:selected').each(function() { 
var cor = $(this).val(); 

S.corTexto = function(e) { 

$(e).css(*color’, cor); 

} 

}); 

}); 

})(jQuery); 

$('button:eq(0)’).click(function() { 

S.corTexto('p'); 

}); 

S('button:eq(l)’).click(function() { 
jQuery.corTexto('h2'); 

}); 

$('button:eq(2)’).click(function() { 

S.corTexto('li'); 

}); 

$('button:eq(3) , ).click(function() { 
jQuery.corTextoC*'); 

}); 

}); 

</script> 

</head> 

<body> 

<form action=" " method=" "> 

<label>Escolha uma cor<br /> 

<select id="selecionaCor"> 

<option value="#999999">Default</option> 

<option value="#FF0000”>Vermelha</option> 
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<option value="#0000FF M >Azul</option> 
<option value="#00CC00">Verde</option> 
coption value="#FFOOFF">Pink</option> 
</se1ect> 

</label> 

</form> 

<button type="button">Paragrafos</button> 
<button type="button”>Cabe<;alhos</button> 
<button type="button">Listas</button> 
cbutton type="button">Tudo</button> 
<h2>Cabe<;alho nivel 2</h2> 

<p>Paragrafo um</p> 

<p>Paragrafo dois</p> 

<p>Paragrafo tres</p> 

<h2>Cabe<;alho nivel 2</h2> 

<ul> 

<li>Item um</li> 

<1i>Item dois</li> 

<1i>Item tres</li> 

</ul> 

<p>Paragrafo</p> 

<h2>Cabe<;alho nivel 2</h2> 



[arquivo-7.6.2.1b.html] 


A fun^ao pode ser aperfei^oada ainda mais e ganhar funcionalidades adicio- 
nais, mas tal exemplo sera finalizado aqui, pois ja cumpriu o objetivo de mostrar 
as tecnicas de cria^ao de fun^oes personalizadas. Ressalta-se que a fun^ao criada 
manipula elementos do DOM, mas como ja se disse, e possivel manipular obje- 
tos nao perteneentes ao DOM com fundoes personalizadas. Que tal desenvolver 
uma fun^ao capaz de manipular o objeto Date() e personalizar a apresentagao de 
datas ern uma pagina web? 


Material com direitos autorais 



Material com direitos autorais 



Parte II 

jQuery na pratica 


A partir do capi'tulo 8, inicia-se a segunda parte deste livro que e dedicada a apli- 
cayao pratica dos conceitos e fundamentos estudados na primeira parte. Todos 
os exemplos desenvolvidos sao comentados c cstao disponiveis para download 
no site do livro. Rccomcnda-sc que o cstudo dos casos mostrados scja sempre 
complementado com a visualiza^ao do respectivo arquivo. 
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CAPITULO 8 

Animates basicas 


Neste capitulo, serao apresentadas algumas animates basicas da bibliotcca 
jQuery. Para cada exemplo, serao mostradas e comentadas a marcagao HTML 
c as regras CSS aplicadas, pois c importance que a aplica^ao de qualqucr efeito 
seja feita em documentos estruturados em conformidade com os padroes do 
W3C Separar a marca^ao HTML da apresentagao e igualmente importance e 
assim se enfatizarao, tambem, as regras CSS, comentando-as sempre que se julgar 
necessiirio. 


8.1 Marca^ao minima 

Todos os exemplos desenvolvidos nao so neste capitulo, mas tambem nos capi- 
tulos subsequentes, se utilizam de uma marca^ao estrutural minima conforme 
sc mostra a seguir: 

1. <!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

2. Transitional//EN" "http://www.w3.org/TR/xhtinll/DTD/xhtitill-transitiona1 .dtd"> 

3. <html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br"> 

4. <head> 

5. <meta http-equiv=”Content-Type" content=”text/html; charset=iso-8859-l" /> 

6. <title>Exemplos praticos</title> 

7. <style type="text/css" media="all"> 

8. /* Regras de estilo aqui */ 

9. </style> 

10. <script type="text/javascript" src=”../jquery-1.2.6.js"x/script> 

11. <script type="text/javascript"> 

12. S(document).ready(function() { 

13. // scripts jQuery devem ser inseridos aqui 

14. }); 

15. </script> 
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16. </head> 

17. <body> 

18. <!— Conteudo da pagina aqui —> 

19. </body> 

20. </html> 



[arquivo-8.1a.html] 


Codigo comcntado: 


linha(s) 

Lin has 1 c 2 


Linha 3 


Linha 5 
Linha 6 


Linhas 7 a 9 


Linha 10 


Linhas 11 a 15 


Descri^ao 

Todo documento HTML dcvc comc^ar com a declara^ao do 
DOCTYPE. £ ncssa declara^ao quc o navegador busca as in- 
forma^des sobrc a sintaxe da marca^ao, bcm como instru^dcs 
de como rendcrizar cada elemento da marca^ao. A maioria dos 
documentos existentes omire essa declaragao e a renderiza^ao se 
processa no chamado modo de renderiza^ao kirks, em oposi^ao 
ao documento cor retamente marcado cujo modo de renderiza^ao 
e chamado de standard. Uma das niais notaveis inconsistencias 
em consequencia da ialta de DOCTYPE em um documento e 
o “Box Model quebrado” no navegador Internet Explorer. Veja 
jQuery.boxModel cm [C7 S7.2]. 

Segue-se ao DOCTYPE a tag de abertura do elemento html quc c 
o elemenro-raiz do documento. Use o atributo lang para indicar 
o idioma principal do documento. 

Sempre declare a codifica^ao de caracteres do documento. 

Nao omita o titulo dc seu documento. Use titulos que intormcm 
o conteudo da pagina, pois os mccanismos de busca dao muita 
importancia ao conteudo do elemento title. O titulo que se 
utilizou “Exemplos p rati cos” tern carater puramentc didarico. 
Na pratica, c uma pessima escolha. Melhor seria descrever su- 
mariamente quais sao os tipos dc cxemplo conridos na pagina, 
por exemplo: exemplos dos metodos jQuery show() e hide(). 

A folha de estilo do documento sera escrita dentro do elemento 
style. Serao usadas folhas de estilo incorporadas ao documento 
para facilitar a leitura e o cstudo. Folhas dc estilo, salvo exccyocs, 
devcm ser colocadas em arquivos externos c linkadas ao docu¬ 
mento. 

Aqui se linkou para a biblioteca jQuery gravada em um arqui- 
vo externo chamado jquery-1.2.6. js, que e a ultima versao da 
biblioteca a epoca que este livro foi escrito e a qual foi baixada 
em http://docs.jquery.com/Downloading_jQuery. 

Contido dentro do elemento script, inseriu-se o metodo jQuery 
$(document).ready() que e o equivalente ao metodo JavaScript 
window.onload. Todo script ali contido s6 entra em a^ao depois 
que o DOM estiver pronto, ou seja, depois que o documento tiver 
sido carregado. 
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Linha(s) Descri^ao (cont.) 

Linhas 17 a 19 Completam o documcnto marcando seus conteudos. Tudo que 
deve ser renderizado sera induido na se 9 ao body. 

Linha 20 Fechamento do elemento-raiz do documento. 



Para maiores informagoes sobre DOCTYPEs padrao do W3C. consulte: 
http://\\YM.w3.org/QA/2002/04/valid-dtd-list.html. 


8.2 Anima^ao com showo e hideo 

Show e hide sao palavras inglesas que significant, rcspectivamente, mostrar e 
esconder. Os metodos jQuery show() e hideO se destinam a mostrar e esconder 
clementos do DOM. Observe as regras CSS a seguir: 

1. p.esconde {display:none;} 

2. p.mostra {display:block;} 

Codigo comentado: 

Linha(s) Descriqao 

Linha 1 Esta regra CSS se emprega nos paragrafos em que se aplicou a clas- 
se esconde. A declara^ao di splay :none faz que os conteudos desses 
paragrafos nao sejam renderizados e tudo se passa como se tais 
conteudos nao consiassem da marca^ao. Os conteudos sao retirados 
do fluxo normal do documento c o espa^o fisico por eles ocupado 
na rendcriza^ao c preenchido pclo elemento que sc segue no fluxo 
da marca^ao. Convent ressaltar que clementos com display:none 
sao ignorados tambem por tecnologias assistivas, como leitores de 
tela,e assim pcrmaneccm inacessi'veis tanto visualmente como para 
qualquer tipo dc midia. 

Linha 2 Esta regra CSS se emprega nos paragrafos em que se aplicou a clas- 
se mostra. A declara^ao displ ay :block faz que os conteudos desses 
paragrafos sejam renderizados normalmente. Esta declaragao e a 
dcclara(,ao-padrao para paragrafos c todos os demais clementos 
nivel de hloco da marca^ao HTML. 

Para elementos in-line, tais como span, strong, em, img etc., a condigao de visibi- 
lidade-padrao e determinada pela regra CSS display:inline. 

Os metodos show() e hide() exercem o mesmo efeito que as regras CSS mostra- 
das. Observe os codigos a seguir: 

1. $C'p.esconde')-hide(); 

2. SCp.mostraD-showO; 
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Codigo comentado: 

Linha(s) Descriqao 

l.inha 1 Este encadcamento jQuery destina-se a encontrnrtodosos paragrafos 

aos quais sc rcnha atribuido a classe esconde e a retira-los do processo 
de rendcrizagao ral como se tivesse sido declarada para eles a regra 
CSS display:none. 

Linha 2 Este encadeamento jQuery destina-se a enconrrar rodos os para- 
grafos aos quais se tenha atribuido a classe mostra e a renderiza-los 
normalmente tal como se tivesse sido declarada para eles a regra 
CSS di spl ay: block. 

Criou-se uma pagina web simples para exemplificar os efeitos que serao 
estudados nestc capitulo. A pagina inicia-se com urn cabeyalho m'vel 1 e cinco 
paragrafos, sendo atribuida a dois deles a classe esconde. Esta pagina servira de 
laboratorio para os scripts de exemplo. Serao explicados cada componente da 
marcagao, bem como a folha de estilo a esta incorporada. A medida que tor ne- 
cessarioacrescentar ou suprimir conteudos na pagina, para demonstrar um novo 
cfeito, este sera acrcsccntado e sera cxplicada sua nccessidade. 

A marcagao inicial e a seguinte: 


1. <div id="com-classe"> 

2. <label>Paragrafos com classe "esconde"<br /></label> 

3. <button type="button">Esconder</button> 

4. <button type="button">Mostrar</button> 

5. </div> 

6. <div id="todos"> 

7. <label>Todos os paragrafos<br /></label> 

8. <button type="button">Esconder</button> 

9. <button type="button">Mostrar</button> 

10. </div> 

11. <hl>Folhas de estilo em cascata</hl> 

12. <p>CSS e a sigla em ...</p> 

13. <p> A grande vantagem ...</p> 

14. <p>HTML marca e ...</p> 

15. <p class="esconde">A adocao desta ...</p> 

16. <p class="esconde">Projetar um ...</p> 


Codigo comentado: 

Linha(s) Descri^ao 

Linhas 1 a 5 Um div com seu respectivo id serve de container para os dois 
botocs que se dcstinam a disparar os eventos esconder e mostrar 
os paragrafos aos quais sc tenha atribuido uma classe esconde. 
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O documento csta pronto para reccbcr o script jQuery que fara cscondcr e 
mostrar paragrafos. O script e apresentado a seguir: 

1. <script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

2. <script type="text/javascript"> 

3. S(document).ready(function() { 

4. $('button:eq(0)').c1ick(function() { 

5. S('p.esconde').hide(); 

6 . }); 

7. $('button:eq(l)').click(function() { 

8. $('p.esconde').show(); 

9. }); 

10. $('button:eq(2)').click(function() { 

11. $('p’).hide(); 

12 . }); 

13. SC button:eq(3)').click(function() { 

14. $('p').show(); 

15. }); 

16. }); 

17. </script> 

Codigo comentado: 

Linha(s) Descri^ao 

Linha 1 Linka a biblioteca jQuery no documento. 

Linhas 2 e 17 Abre e fecha o container <scriptx/scn'pt> para o codigo. 

Linhas 3 e 16 Abre e fecha o container para o metodo document. readyO que faz 
que todo o script nele contido aguarde o carregamento do DOM 
para entrar em a?ao. 

Linha 4 Define uma fumjao a scr executada quando o usuario clicar o 

pri meiro elemento button na pagina. Lembrc-sc deque os metodos 
jQuery rctornam uni conjunto dc objetos, sent neccssidade de 
se procedcr a loops. Assim $('button') retorna todos os botoes 
enconrradosnodocumcntocacstcsatribuiumindicecomc^ando 
a contagem em 0 (zero), logo eq(0) sc rctere ao primeiro elemento 
button enconrrado. 

Linha 5 Hste e o script da fun^ao que sera executada ao se clicar o pri¬ 

meiro botao. Encontra todos os paragrafos com a classe esconde, 
e esconde-os, caso estejam visiveis. 

Linhas 7 a 9 Este e o script da fun^ao que sera executada ao se clicar o se- 
gundo botao. Encontra todos os paragrafos com a classe esconde 
e mostra-os, caso estejam escondidos. 

Linhas 10 a 15 Cumpremfun^oesidenticas as anteriores para todos os paragrafos 

do documento. 

Para a demonstragao dcssc efeito, consulte o arquivo indicado a seguir. 
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Conforme mostra a figura 8.1, a pagina construida para as demonstrates possui 
dois conjuntos de botoes, um a esquerda e outro a direita. Cada um desses 
conjuntos cumpre finalidades distintas na demonstragao. Ao visualizaros efeitos 
em seu navegador, clique sucessivamente o conjunto de botoes a esquerda e, 
depois, o conjunto de botoes a direita. Observe e entenda o funcionamento de cada 
um dos conjuntos separadamente, a partir da posigao inicial da pagina. ou seja, 
comece os cliques em cada conjunto com todos os cinco par^grafos a vista. 



[arquivo-8.2a.html] 


O script csta funcionando como sc prctcndeu, mas ha algumas mclhorias quc 
se pode introduzir. O mctodo jQuery toggleO destina-se a alternar as condi^oes 
de um elcmcnto do documcnto. Em sc tratando dc visibilidadc, sc o elcmento 
estiver visivel, ocultara, c se estiver oculto, acabara tornando-o visivel. 


8.3 Anima^aocom toggleO 

O uso deste mctodo simplifica nao so o script, mas tambem a marca^ao da pa¬ 
gina. Possibilita quc se use um linico botao para cumprir duas finalidades, no 
caso em questao, mostrar e esconder. 

Genericamente, o metodo toggleO permite alternar dois comportamentos, e nao 
somente a visibilidade, a cada clique do mouse. Voce define dois comportamentos 
como parametros para o mctodo toggleO c quando o usuario clica uma vez, dispara 
o primeiro comportamcnto dcfinido, outro clique, o segundo comportamcnto, 
mais um clique, o primeiro comportamcnto, c assim indefinidamente vao sc 
altcrnando os comportamentos definidos conforme o clique seja par ou l'mpar. 
Observe que no script a seguir, definiu-se o metodo toggleO aplicado a um div. A 
primeira fumjao reduz a opacidade do div para 20% e a segunda fun^ao restitui 
a opacidade original para 100%, ou seja, opaca. 

As regras CSS para apresentar o div sao mostradas a seguir. 

CSS: 

<style type="text/css" media="aH"> 

div { 

width:200px; 
height:150px; 
background 

border:2px solid #000; 
cursorrpointer; 

} 

</style> 
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Agora voce precisa somcnte dc urn botao. 

Codigo comentado: 

Linha(s) Descri^ao 

Linha 4 Encontre todos os paragrafos com a classe esconde e torne-os invisi- 
veis, caso cstejam visivcis, on visivcis, caso estcjam invisiveis. 

Linha 7 Cumpre as mesmas funydes descritas antcriormcntc para todos os 
paragrafos do documento. 

Para a demonstrayao desse efeito, com o uso dc toggleO, consulte o arquivo 
indicado e mostrado na figura 8.2. 
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Figura 8.2 - Soluydo com um botao e dois textos. 

No arquivo indicado, observe o funcionamento dos scripts considerando que 
ambos agem sobre os mesmos paragrafos, ou seja, ao utilizar toggleO, o resultado 
do ultimo clique no botao a esquerda influenciara o primeiro clique no botao a 
direita e vice-versa. 

Para evitar confusao, verifique o funcionamento do botao a esquerda reali- 
zando varios cliques seguidos nele e termine com o clique que mostra todos os 
paragrafos. A seguir, aplique o mesmo procedimento ao botao a direita. 

A seguir, alterne os cliques nos botoes c observe os resultados. 
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Agora, de outro passo no scntido dc apcrfeigoar ainda mais esse documento 
alterando a maneira como o texto do botao e apresentado ao usuario. Que tal se 
cm vez do texto Esconder/Mostrar para os botocs, houvesse o texto “Esconder” 
se os paragrafos estivessem a mosrra e “Mostrar” se estivessem escondidos? Para 
obter esse aperfei^oamento, retire o texto dos botoes da marca^ao HTML con- 
forme mostrado a seguir: 

<button type="button"x/button> 


E acrescente ao script anterior o seguinte: 

1. <script type="text/javascript"> 

2. S(document).ready(function() { 

3. $('button:eq(0)').text('Esconder').click(functionO { 

4. if (S(this).textO == 'Mostrar') { 

5. $(this).text('Esconder'); 

6. } else { 

7. $(this).text(’Mostrar'); 

8 . } 

9. $('p.esconde').toggle(); 

10 . }); 

11. SC'buttonieqClVJ.textC'Esconder'TclickCfunctionO { 

12. if ($(this).text() == 'Mostrar') { 

13. $(this).text('Esconder'); 

14. } else { 

15. $(this).text('Mostrar'); 

16. } 

17. $('p').toggle(); 

18. }); 

19. }); 

20. </script> 

Codigo comentado: 

Linha(s) Descri^ao 

Linha 3 Utilizou-sc ometodo text(' Esconder'), que sedestina a inseriro texto 

“Esconder”, como conteiido do botao. Assim, quando o documento 
c carregado, o botao aparecc com esse texto. 

Linha 12 Ao ser clicado, inicia-se uni teste condicional que determina o se¬ 
guinte: se o elemento que acaba de ser clicado, $(this), contiver o 
texto “Mostrar”, altere esse texto para “Esconder” se nao, altere para 
“Mostrar”. Esse teste condicional faz a magica, alternando o texto 
do botao. 

Para demonstrar esse novo efeito, com alternancia do texto do botao, consulte 
o arquivo indicado e mostrado na figura 83. 
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Figuro 8.6 Solugao com CSS desabilitodo. 

Note que os botoes sao renderizados, mas perderam o respectivo texto indica¬ 
tive de sua finalidade. £ necessario corrigir isso. Voce saberia antecipar a solugao 
para esse novo problema? Ou seja, como apresentar os botoes completos na 
situagao em que JavaScript esta habilitado e CSS esta desabilitada? 

A resposta e a seguinte: retire a marcagao dos botoes do HTML e insira-os 
via jQuery. H aqui se usarao os metodos beforeO e after() que inserem marcagao, 
respectivamente, antes e depois de um elemento do DOM. 

O script sera alterado para o seguinte: 

1 . <script type="text/javascript"> 

2. S(document).ready(function() { 

3. var HtBilBotaoUm = "<div ids'coin-classe'xlabeHParagrafos corn classe 

'esconde'<br /></labelxbutton type='button'x/buttonx/div>"; 

4. var htulBotaoDois = '<div id="todos''xlabel>Todos os paragrafos 

<br /></labelxbutton type="button"x/buttonx/div>’; 

5. $('hr).before(htKlBotaoUm); 

6. $('#co«-classe').after(htmlBotaoDois); 
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7. $('button:eq(0)').text('Esconder’).click(function() { 

8. if (S(this).textO == 'Mostrar') { 

// restante do script sem a1tera;ao 

23. }); 



[arquivo-8.3e.html] 


Codigo comentado: 

Linha(s) Descri^ao 

Linha 3 Criou-se a variavel htmlBotaoUm que armazcna a marca^ao 1 ITMLdo 
primeiro botao. 

Linha -4 Criou-se a variavel htmlBotaoDois que armazena a marca^ao HTML 
do segundo botao. 

Linha 5 Inseriu-se a marca^ao do primeiro botao imediatamentc antes do 
elemento hi. 

Linha 6 Inseriu-se a marca^ao do segundo botao imediatamentc apos a 
marcagao do primeiro botao que fora inserido conforme descrito 
na linha 5. 


Para demonstrar esse novo efeito, que contempla o caso de CSS desabilitada, 
consulte o arquivo indicado e mostrado na figura 8.7. 



Figure 8.7 - Soluqoo final com CSS desabilitada. 
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8.4 Suavizando a anima^ao 

Voce deve ter notado nos arquivos de demonstrate descnvolvidos ate aqui que 
a transit 0 mostra/esconde e feita de maneira abrupta, ou seja, os conteudos 
sao revelados ou escondidos instantaneamente, aparecendo e desaparecendo 
em tra^des de segundo. 

A biblioteca jQuery oferece uma funcionalidade que permite ao desenvolvedor 
controlar o intervalo de tempo gasto para mostrar e/ou esconder os conteudos. 
Voce passa um parametro para definir um intervalo de tempo para um dos 
seguintes metodos: hide(), show() ou toggleO, conseguindo assim suavizar sua 
animat 0 com estes. 

Os parametros aceitos sao slow, normal e fast, que definem, respectivamente, 
animates lentas, normais c rapidas. Podemos definir o parametro usando uni- 
dade de tempo milissegundos, por excmplo: 3000 cquivale a um intervalo de 3 
segundos, 600 equivale a 0£ segundo, e assim por diante. Observe os exemplos 
a seguir: 

hide('slow*); 

sho\v(' fast'); 

hide(1200); 

toggle(2000); 

Note o uso das aspas (simples ou duplas) quando a definite do intervalo de 
tempo e por palavra-chave e o nao uso das aspas, quando por milissegundos. 

Retome o ultimo arquivo de demonstrate: arquivo-8.3e.html e suavize a ani¬ 
mat 0 ai inserida. Observe os acrescimos feitos: 

$('button:eq(0)').text('Esconder').click(function() { 
if ($(this).text() »- 'Mostrar') { 

S(this).text('Esconder’); 

} else { 

S(this).text('Mostrar'); 

} 

$('p.esconde').toggle('slow'); 

}): 

$('button:eq(l)').text('Esconder').click(function() { 
if ($(this).text() == 'Mostrar') { 

S(this).text('Esconder'); 
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Folhas de estilo em cascata 
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Figura 8.8 - Progressao da onimac;ao com show(). 

Observe os codigos mostrados a seguir: 

<style type="text/css" media="all"> 
body {/* sem altera<;6es */} 

hi {font-size:1.6em;} 
label {color:#c30;} 

divltudo {background:#000; color:#0f0; padding:2px 20px;} 

button {/* sem alteracoes */} 

</style> 

<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
escript type="text/javascript"> 

$(document).ready(function() { 

var htmlBotaoUm = '<div id="todos"xlabel>Todos os paragrafosebr /></label> 
<button type="button"x/buttonx/div>'; 

$ C'hi').after(htmlBotaoUm); 

$('button').text('Esconder').click(function() { 
if ($(this).text() == 'Mostrar') { 

S(this).text('Esconder'); 

$('#tudo').show(3000); 

} else { 

$(this).text('Mostrar'); 

S('#tudo').hide(1000); 

} 

}); 

}); 

</script> 

</head> 


Material com direitos autorais 



Capitulo 8 ■ Animates basicas 


231 


<body> 

<hl>Fo1has de estilo em cascata</hl> 

<div id="tudo"> 

<p>CSS e a sigla em ...</p> 

<p> A grande vantagem ...</p> 

<p>HTML marca e estrutura ...</p> 

<p>A ado<;ao desta ...</p> 

<p class«"esconde">Projetar urn ...<p> 
</div> 



[arquivo-8.4c.html] 


8.5 Anima^ao com slideUpO 6 slideDownO 

Slide up e slide down sao palavras inglesas que significant respectivamente, des- 
lizar para cima e deslizar para baixo. Os metodos jQuery slideUpO e slideDownO 
destinam-se a esconder e mostrar, respectivamente, elementos do DOM fazendo 
que o desaparecimento se processe em um deslizamento de baixo para cima e 
o aparecimento de cima para baixo, ao contrario dos metodos estudados ante- 
riormentc, nos quais o proccsso mostrar c esconder ocorre em sentido diagonal. 
Nessa animayao, nao ha efeito de opacidade como na anterior. Na figura 8.9, veja 
o progresso da anima^ao. 


Folhas de estilo em cascata 


Todosospsr4gra&s 



Figura 8.9 Progressao da animaqao com slideDownO. 
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Voce podc controlar o intcrvalo dc tempo da animate dcclarando um para metro 
para o metodo, tal como fez para os metodos estudados anteriormente. 

Apliquc esse metodo na animate vista no arquivo-8.4c.html. As modifica^oes 
nesse arquivo sao mostradas a seguir: 


$('button').text('Esconder’).click(function() { 
if ($(this).text() == 'Mostrar') { 

$(this).text('Esconder'); 

$('#tudo').siideDown(’siow’); 

} else { 

$(this).text('Mostrar'); 
S('#tudo').slideUp(1500); 

} 

}); 



[arquivo-8.5a.html] 


Uma funcionalidadc intcrcssantc da biblioteca jQuery, muito util para anima¬ 
tes, sao as chamadas opcionais de uma funto denominadas callback. Scm outras 
considera^ocs tcoricas, callback para animates podc ser definida como uma 
chamada para uma fun^ao que sera executada tao logo a animate termine. 

Todos os metodos que voce coloca cm uma animat 0 sao cxccutados simul- 
taneamente, respeitado o tempo de execute, resultando na animate. 

Caso queira incluir uma ate a ser executada tao logo a animate termine, 
voce devera passar uma funyao para o metodo da animate, como se fora um 
parametro. A sintaxe geral para callback e mostrada na animate seguinte, que e 
uma modificagao da animayao vista no exemplo anterior. Note no codigo a seguir 
que callback e uma funto que, ao terminar a animate definida com slideDown() 
(revelar), executa a ai^ao de adicionar uma regra CSS definindo uma cor vermelha 
para os textos contidos e uma cor vermelha para a borda do clemento body. Da 
mesma forma, a funto a executar ao termino da animate definida com slideUpO 
(esconder) executa uma a^ao de mudanga dc cores. 


$('button').text('Esconder').click(function() { 
if (S(this).textO == 'Mostrar') { 

$(this).text(’Esconder’); 

S('#tudo').slideDown(3000, functionO { 

$('body').css({color:'red', borderColor:'red'}); 

}); 
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} else { 

S(this).text(’Mostrar'); 

$('#tudo').slideUp(1500, function() { 

$('body').css({color:’green', borderColor:'green'}); 

}); 



[arquivo-8.5b.html] 


8.6 Anima^ao com fadeino e fadeouto 

Fade out c fade in sao pa lavras inglesas quc significant respecrivamentc, desvanc- 
ccr c avivar. Os metodos jQuery fadeOutO c fadelnO sc dcsrinam, respcctivamcnte, 
a cscondcr e a mostrar elementos do DOM fazcndo quc o dcsaparccimcnto sc 
proccsse com o esmaecimcnto do comciido c o aparccimento, com scu avivamcn- 
to. Funcionam dc maneira difercnte dos metodos cstudados anteriormente, nos 
quais o processo mostrar e esconder sc faz com movimenta^ao do conteudo, quer 
na diagonal, quer na vertical. Nesta animayao, o cfeito e obtido exclusivamente 
com varia^ao dc opacidadc c o conteudo nao se movimenta. Na figura 8.10, veja 
o progresso da anima^ao. 


Folhas de estilo em cascata 


Todos o % 

[ E:cond«» | 



CSS 4 a sola «m ingWs para Cascading Sty to Sheet que am porttguis for tiiduiido para fothrt de estHo ten 
cascata a 4um meceroimo s>mpi«s para adKionar esHoo (p ax , fontee,cores, espagaroentos) aos documemos 
Web 


A grande rantagem do uso de CSS e a de separar a mareagSo HTML, da itpresentajiG do site Em oulras 
palavras. vale d»:er pie c HTML destine-^ nmcamanie a estmtorar a marcar o cooteOdo, Aranda por ronta das 


CSS 4 a sola em irvgWs para Cascading Style Sheet qua em podegufs for Iraducido para fodia da estilo em 
cascata a a um macamtmo simples para adKionar estilos (p ax , tontas. coras. espagamentos) aos documemos 
Web 

A grarde vamagem do uso da CSS a a da separar a marcagio HTML, da apresemaglo do sda Em culras 
p»l.tvrjs. vaie A; nr quo o HTMt. detima-te unicamente a eslruturar o marcar o conteudo, fieando por eonta das 


Figure 8.10 - Progressed do animaqoo com fadeln(). 
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Voce podc conrrolar o intcrvalo dc tempo da animagao dcclarando uni para- 
metro para o metodo, tal como fez para os metodos estudados anteriormente. 

Apliquc esse metodo na animagao vista no arquivo-8.5a.html. As modificagoes 
nesse arquivo sao mostradas a seguir: 


$('button').text('Esconder’).click(function() { 
if ($(this).text() == 'Hostrar') { 

$(this).text('Esconder’); 

S(’#tudo').fadeln(SOOO); 

} else { 

$(this).text('Mostrar'); 

S('#tudo').fadeOut (1500) ; 

} 

}); 



[arquivo-8.6a.html] 


8.7 Animagao personalizada com animateO 

Os metodos de animagao estudados ate aqui, neste capitulo, sao nativos da biblio¬ 
teca jQuery. Contudo, voce nao csta limitado ao uso somente dessas animagoes, 
pois a biblioteca forncce um metodo de animagao gencrico para scr utilizado cm 
animagoes personalizadas.Trata-se do metodo animateO, que permite manipular 
propriedades CSS numericas. Para demonstrar essa animagao, use os codigos 
mostrados a seguir: 

► CSS: 

1. <style type="text/css" media="all"> 

2. body {/* sem alteracoes */} 

3. label {/* sem alteracoes */} 

4. p {background:#444;color:#fff; padding:8px 20px;} 

5. button {/* sem alteragoes */} 

6. </style> 

Codigo comentado: 

Linha(s) Descrigao 

Linhas 1 a 6 Altere sua folha de estilo em fungao da retirada de elementos da 
marcagao. Use um so paragrafo com fundo cinza-escuro e letras 
brancas conforme a regra CSS na linha 4. 
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► jQuery: 


1 . 

2 . 

3. 

4. 

5. 

6 . 

7. 

8 . 

9. 

10 . 
11 . 
12 . 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20 . 
21 . 
22 . 

23. 

24. 

25. 

26. 

27. 

28. 
29. 


<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 
script type="text/javascript"> 

S(document).ready(function() { 

$('html').css('height', '101%') 

$('hi').after('<button type="button">Esconder</button>’); 

var emAndamento = '<img src="carregando.gif" class="gif-andamento" />'; 

var alturalanela = $(window).height(); 

var alturaObjeto = $('p').outerHeight(); 

var posicaoObjeto = S('p’).position().top; 

var amplitudeDeslocamento = alturaJanela - alturaObjeto - posicaoObjeto; 
S('button').click(function() { 

if (S(this).textO == 'Hostrar') { 

$(this).text('Esconder').hideC).after(emAndamento); 
S('p').show().animate({top:0, opacity:l}, 2500, function() { 

$('.gif-andamento').css('display', 'none'); 

SC button').show(); 

}); 

} else { 

S(this).text('Mostrar').hide().after(emAndamento); 
S('p').css({position:'relative'}) 

.animate({top:amplitudeDeslocamento, opacity:0}, 2500, function() { 
S(’p').hide(); 

SC.gif-andamento').css('display', 'none'); 

S('button').show(); 

}); 

}; 

}); 

}); 

</script> 



[arquivo-8.7a.html] 


Para exemplificar a anima^ao personalizada, utilizou-se um elemento pa- 
ragrafo que sera deslocado para fora da tela com um efeito do tipo cair. Para 
restabelecer a visibilidade, o efeito sera ao contrario, ou seja, o paragrafo entrara 
na tela com um efeito do tipo subir. Como exercicio, voce pode incrementar 
essa anima^ao adicionando o efeito de transigao de opacidade. Outro exercicio 
interessante consiste em deslocar o objeto para fora da tela, fazendo-o sair pela 
lateral. E que tal sair pela direita e entrar pela esquerda? 
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Codigo comentado: 


Linha(s) 
Linha 4 


Linha 5 
Linha 6 

Linha 7 
Linha 8 

Linha 9 

Linha 10 

Linha 11 

Linha 19 


Linha 20 


Descri^ao 

Esta rcgra CSS for^a o aparecimento da barra dc rolagcm ver¬ 
tical nos navcgadorcs-padrao, mesmo sem necessidadc dela, ao 
contrario do Internet Explorer que reserva o espa^o indepen- 
dentemente do espa^o vertical requerido pelo conreudo. Ncssa 
anima^ao, o objeto e colocado para fora da tela por sua parte 
inferior e, nesse momento, aparece a barra de rolagem, o que 
causa um deslocamento horizontal, como um pulo lateral, da 
pagina. For^'ando o aparecimento da barra de rolagem, cor rige-se 
esse pulo. Experimente retirar essa linha do codigo e visualize a 
anima^ao para ver o desagradavel pulo. 

Inscriu-sc um botao logo apos o elemento hi, que, ao scr clicado, 
ira executar a animaqao. 

Armazenou-se, na variavel emAndamento, uma marcagao HTM Lque 
define a inser^ao de uma gif-animada indicativa de carregamento. 
Para uma ferramenta on-line geradora desses tipos de gif, visite: 
http://www.ajax1oad.info/. 

Armazenou-se, na variavel alturalanela, a altura total da jancla 
do navegador cm unidade pixel. 

Armazenou-se, na variavel alturaObjeto,a altura total,em unidade 
pixel, do box CSS que content o objeto a animar, neste caso, o 
paragrafo. Veja [C4 S4J], 

Armazenou-se, na variavel posicaoObjeto, a coordenada vertical, 
ou seja, a distancia em pixel que o objeto se encontra do topo 
da janela do navegador. 

Armazenou-se, na variavel amplitudeDeslocamento, a distancia em 
pixel que o objeto devera pcrcorrer desdc sua posi<;ao atual ate 
sair completamcnte da tela por seu limite inferior (Eigura 8.11). 

Condicional if() {} testa a situagao da pagina e decide o que 
fazer. Na situagao inicial, o teste resulta falso, pois o texto do 
botao e Esconder e nao Mostrar. Assim a execugao do script vai 
para a linha 19. 

Alterou-sc o texto do botao para Mostrar e escondeu-se o botao. 
Ao deixar o botao a niostra, possibilita ao usuario clica-lo durante 
a anima^ao,o que ira causar confusao. Altere o script e comprovc 
voce mesmo. A seguir, insere-se, no lugar do botao, a gif-animada 
indicando ao usuario que a animagao esta em andamento. 

Atribui-se posi tion: relative ao objeto a animar, pois como se sabe 
das tecnicas CSS, somente objetos posicionados sao passiveis de 
ser deslocados por defini(3o de coordenadas. 
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Linha(s) Descri^ao (cont.) 

Linhas 21 a 25 A animagao comega aqui, com a passagem dc parametros para 
o metodo animate(). Nessas linhas. a agao e a seguinrc: anime o 
paragrafo cuja posigao sc acabou dc definir como rclativa, Icvan- 
do-o para uma coordcnada vertical igual a quantidadc dc pixels 
necessdria para faze-lo sair da tela pela parte inferior (variavcl 
amplitudeDeslocamento); a animagao dcvcra durar dois segundos 
c meio (2500). Ao tcrminar a animagao, retire o paragrafo da 
marcagao (linha 33), mostre o botao agora com texto “Mostrar” 
(linha 22) e esconda a gif-animada (linha 23), indicando o fim 
da animagao. Agora o botao esta com o texto “Mostrar” e a 
condicional, na linha 12. resulta verdadeira, rodando o script a 
partir da linha 13. 

Linha 13 O funcionamento segue a mesma ldgica da explicada anterior- 

mente, para a condigao dc teste falsa, e agora o script coloca o 
objeto a vista. 

E necessdrio escondero paragrafo conforme mostra a linha 22, pois o deixando 
a vista, ap6s ter saido da tela, uma simples rolagem vertical da tela o revelaria 
ali, o que certamente nao se deseja, mesmo porque havendo conteudo apos a 
borda inferior da tela, o paragrafo se colocaria sobre tal conteudo. 

Na figura 8.11, ha uin esquema indicative do calculo do deslocamento vertical 
necessario para fazer um objeto sair pela parte inferior da tela. 



Figura 8.11 Calculo do deslocamento vertical. 

Consulte o arquivo-8.7b.html para visualizar os calculos dos valores para as 
variaveis mostradas nesse exemplo. Abra o arquivo e proceda a alguns redimen- 
sionamentos da janela do navegador, recarregando a pagina a cada redimensio- 
namento, para visualizar os resultados dos calculos. 
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CAPITULO 9 

Revelando conteudos 


Neste capitulo, serao cstudados alguns cfeitos da bibliotcca jQuery dcstinados 
a esconder c revelar conteudos. Nao se podc esquccer que cfeitos obtidos com 
scripts rodando no lado do clicnte, tais como sao os cfeitos jQuery, devem ser 
projetados de modo a nao bloquear nem obstruir o acesso a conteudos. £ o que 
se denomina JavaScript nao obstrutivo. 

Um bom efeito sempre comega a partir de um documento bem estruturado, 
com sua marca^ao e CSS validadas no W3C e acessivel. Ao longo do processo 
de criayao de um efeito, todo cuidado e necessario para nao introduzir regras 
CSS, ou marcayao, que venham a comprometer a acessibilidade. 

Esconder e revelar conteudos e um efeito muito facil de obter, podendo ser 
empregado com seguran^a nas situagdes em que extensos conteudos obrigam o 
usuario a rolagens de tela. Esse caso e um classico cxemplo do que sc denomina 
“enriquecimento da experiencia do usuario” caracterizando-se por proporcionar 
ao usuario com infra-cstrutura apropriada (por cxemplo: JavaScript habilitado 
no navegador) melhores condi^oes de uso do documento cm rclagao aos usua- 
rios sent a ncccssaria infra-estrutura. E, aqui, vale repetir: o acesso c garantido a 
todos, mas os efeitos de enriquecimento irao se destinar apenas aos habilitados 
a experimenta-los. 

9.1 FAQ CSS 

Para as explicates dos efeitos de esconder e revelar conteudos, sera tomada como 

base uma adaptable de trecho de uma FAQ CSS real publicado em http://v»ww. 
maujor.com/tutorial/faq.php. 
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Escolheu-sc uma FAQ CSS, mas evidcntementc as tecnicas mostradas nao 
sao de aplicagao exclusiva para um documcnto quc aprcscntc uma listagcm dc 
perguntas e respostas como sao as FAQs. Ao contrario, entendendo a recnica 
explicada para esse exemplo, voce facilmente podera adapra-la a qualquer tipo 
de conteudo. 

Marca^ao basica 

Para desenvolver o efeito revelar e esconder da FAQ adotada como exemplo, 
sera utilizada uma marcagao HTML basica na qual se escolhe um total de dez 
perguntas. Veja a seguir essa marcagao devidamente comentada. 

Para melhor entendimcnto das tecnicas de desenvolvimento, optou-se por ini- 
ciarcom um script simples em uma primeira etapa e,a partirdai, ir modificando, 
aperfeigoando e apresentando alternativas ao script em etapas sucessivas. 

O foco principal deste capitulo e o aprendizado das tecnicas de desenvolvi¬ 
mento com jQuery. Varios sao os caminhos para se conseguir um mesmo efeito. 
Certamente voce, a medida que progredir no estudo, encontrara alternativas 
para os scripts apresentados, nao devendo limitar-se a um simples copiar e colar. 
Agindo assim, estara enriquecendo e aperfeigoando seu aprendizado. 

A marcagao HTML e CSS da pagina basica para os exemplos e mostrada a 
seguir. 

► CSS: 

1. <style type="text/css M media="all"> 

2. body { 

3. width:400px; 

4. font:80%/1.2 Arial, Helvetica, sans-serif; 

5. margin:0 auto; 

6. padding:0; 

7. } 

8. dt { 

9. margin:20px 0 3px 0; 

10. font-weight:bold; 

11. border-top:lpx solid #ccc; 

12 . } 

13. dd { 

14. margin:0; 

15. padding:5px 0 0 0; 

16. text-align:justify; 

17. } 

18. </style> 
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Trata-se dc uma folha dc cstilos minima descinada a centralizar a pagina 
e inscrir apresenta^ao basica com a finalidade exclusiva dc facilitara visu- 
aliza^ao do exemplo. 


► HTML: 


1. <hl>FAQ CSS</hl> 

2. <h2 id="indice">tndice</h2> 

3. <o1> 

4. <lixa href="#css">0 que significa a sigla CSS?</ax/1i> 

5. <!-- omitidos oito itens --> 

6. <lixa href="#co(nentario">Posso incluir comentarios nas regras CSS?</ax/1i> 

7. </ol> 

8. <h3>Perguntas e respostas</h3> 

9. <dl> 

10. <dt id="css">0 que significa a sigla CSS?</dt> 

11. <dd>CSS e a sigla...</dd> 

12. <ddxa href="#indice">indice</ax/dd> 

13. <!— omitidos oito itens —> 

14. <dt id="comentario">Posso incluir comentarios nas regras CSS?</dt> 

15. <dd>Sim. Comentarios podem e ...x/dd> 

16. <ddxa href*"#indice">tndice</ax/dd> 

17. </dl> 

18. </body> 

19. </html> 



[arquivo-9.1a.html] 


Codigo comentado: 


Linha(s) 
Linha 1 
Linha 2 


I.in has 3 a 7 


Descri^ao 

Titulo da pdgina. 

Tftulo para o indice das pcrguntas contidas no FAQ. Note a 
presen^a do atributo id="indice" nesse titulo. Esse id servira 
como ancora dc desrino para a navega^ao interna que remerc o 
usuario ao indice sempre que se clicar qualqucr dos links deno- 
minados “indice” existences ao final de cada resposta. Deve-se 
evitarapraticade marcardestinos delinks internos com asintaxe 
HTML <a name="nome"x/a>, a nao ser nos casos de documentos 
servidos para navegadores antigos que nao suportam id para 
marcar ancoras. Assim, preiira o uso de id para marcar ancoras 
de destino da navega^ao interna. 

Marca;aodeuma listaordenadacujositcnscontcm as pcrguntas 
da FAQ. 
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Linha(s) Descri^ao (cont.) 

L.inhas 9 a 17 Marcagao dc uma lista de definigao contendo as respostas para 
cada uma das pcrgunras. l.istasdedefini^ao saoaquelas marcadas 
com o elcmento HTML dl (definition list). Os dois elementos 
desse tipo de lista sao: dt (definition term), que significa termo a 
ser definido, e dd (definition description), que significa descri^ao 
da definigao para o termo.Trata-se de uma lista na qual se define 
um termo e, a seguir,descreve(m)-se uma ou mais caracteristicas 
do termo. Esse tipo de lista toi escolhido para marcar a FAQ 
adotada como cxemplo, pois se considera cada pergunta como o 
termo a ser definido e a resposta, a defini^ao ou descrigao para a 
pergunta.Ao final decada resposta,cria-se um link parao indice, 
marcado com um termo de definigao. Para nao alongar o codigo, 
mostra-se somente a marcagio para duas das dez perguntas 
existentes no exemplo. 

A renderiza^ao da pagina basica para o FAQ e apresentada na figura 9.1. 


OlAQ CSS Mozilta 1 irelox EE® 

ftrquNo Edtjr E.j:r rstcdiKc Fsvcrtos 

ttrranmas Ffcd» 
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|3 la Nt* 1 

Cl- 

ST 





FAQ CSS 


Indice 

t st A.fe CJS.S.7 

2 Qusl * ? lif ah i ad? dll CSS? 

3 Pfr one deun isar .".Bff 1 

4 amit ;; venters d» OSM CSS? 

5 Ac CSS ealo do a:on)3 co~i ao W;b Starves? 

S 0 qie e rsgra C 3 S ? 

7 Ctmu ■act-.*- win iwi CSS ? 

0 tei ?k p « - 'K ’. 1 ': ' .-iS-' 

y A: 'Ji-S e < ms iis:nlww nnsrulss? 

10 Posso incur camsnlangs r-as -eara; CSS? 

Perguntas a respostas 
0 <|ii« signified .■ sitjl.i CSS7 

CSS a a siqla para Cascading Stile Sheets sue eir pcituqjes tci 
iraduz do para fcAss <ts catfr cm cosceto « rwaa mais i, ::uo um 
dccu'-en'o onde sdo ccS-idas leg-as dc femata^Jo oj do estiloa. a 
setern spiraeas aos elementos estiutursis de matcatao 

I'dire 


Figure 9.1 - Pdgino bosico poro FAQ. 

Till documento encontra-sc cm sua forma mais elcmentar com alguma esti- 
lizagao basica, contudo um usuario ainda que desabilitc suporte as CSS cm seu 
navegador ou abra a pagina cm um navegador dc texto, tern acesso a rodas as 
perguntas c respostas do FAQ c netihum contcudo sera perdido. 
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esses assuntos aos quais sc dispcnsa a maxima atcngao. Assim, no caso da FAQ 
em questao, e de vital importancia que o usuario identifique instantaneamente 
como revelar o conteudo. 

Na soluyao dada, os links para o indice continuarao funcionais. Tais links 
serao particularmente titeis nos casos cm que o usuario tiver dc rolar a pagina 
para visualizar respostas localizadas abaixo da dobra Clin ha limite inferior da 
janela do navegador). 

Cada vez que o usuario clicar um dos links para ver a resposta, esta sera 
revelada. Adicionalmente, acrescentam-se uma borda e uma cor de fundo para 
destacar a resposta revelada. 

Observe, na figura 93, o que aconteceu apos o usuario ter clicado sucessi- 
vamente os links para revelar as respostas a duas perguntas. Note que acima 
da resposta sc disponibilizou um link para fecha-la e abaixo dcla, um link que 
remete ao indice. 


Veja, nas figuras 9.2 e 93, o ciclo completo do efeito que se pretende obter 
nessa primeira etapa. 


V) FAQ CSS • tAo/ille Hrefo* 
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6 ;» a,f j -core CSS ? 
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10 r'o^sp indmr comentiwun w tegtaf. CSS? 

Perguntas e respostas 

O tine *.tijnitk.i a itgla CSS/ 

Vet ruspo-jta 
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Ficher _ 

A 'irtMade das CSS * » n* mltret rtn HTvii lode t gualq ter 
dedare^So que else a formates;ao, a epresenta<;80 do 
dccuneria. bio signifies duet gee tags do! pa ««»>, *>. <i>, 
etc, bem como uso de colonel e Innas de label as para obtenceo 
ce espa;emeito» reo sdc admdtdos ou eimri les com 
"estftjfies err um pregeto W-oft com CSS Vale direr 
timplmejida HTWi pe.-e eVmtu/aiJlo e CSS tvttt> 
tftdMiMffo. 

Indtca 


Figure 9.3 - Pagina paro FAQ: primeira etopa - revelar. 

Veja a seguir os codigos para desenvolver o efeito proposto para esta etapa. 

Nao se irao acrescentar nenhuma marca^ao nem regra CSS ao documento. 
Toda a marca^ao necessaria e a folha de estilo serao inseridas via script. 
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Sera quc csta c uma boa escolha? Afinal se estao misturando marcagao e 
apresentagao com comportamcnto. t boa pratica manter essas trcs camadas do 
desenvolvimento independentes. Toda a marcagao fica no HTML da pagina, a 
apresenragao, em arquivos de folhas de estilo e o comportamento, em arquivos 
de script. 

Quando se trata de usar jQuery e scripts de maneira geral, com a Hnalidade 
de incrementar a apresentagao da pagina, nada ha de errado em se adicionar 
marcagao e estilizagao via script. Uma criteriosa escolha do que deve ser inserido 
e, principalmente, o uso de bom senso pelo desenvolvedor sao mais importan- 
tes que despender tempo com discussoes dessa ordem. O objetivo principal do 
uso de script c cnriqueccr a cxpcricncia do usuario, sem bloqucar seu acesso a 
conteiidos. Para cumprir esse objetivo, c perfeitamente valido inserir marcagao 
e estilizagao via script. 


Um erro comum e frequente reladonado a esse principio e esconder, iniciatmente, 
o conteiido com uso de CSS e revete-lo via script. 0 procedimento deve ser 
exatamente o inverso, ou seja, deixa-lo visivel e definir regra CSS para esconder 
via script. Agindo assim, nao se bloqueia o acesso ao conteudo a usuarios que 
estejam navegando sem JavaScript habilitado. 


Nessa ctapa, sera utilizado o script para tais inscribes e, na sequencia do de¬ 
senvolvimento, cm etapas futuras, scrao mostradas inscribes cm sua rcspectiva 
camada, misturadas com insergbes por script, todas sendo solugoes validas e 
funcionais. 


Em todos os exemplos desenvolvidos neste iivro. colocaram-se as folhas de estilo 

? e os scripts incorporados na segSo head do HTML da pagina unicamente para 
facilitar ao leitor o estudo dos codigos-fonte. Em desenvolvimento real, deve-se 
linkar tanto folhas de estilo como scripts. 


Observe o script que produz o efeito proposto e os comentarios: 

1. <script type="text/javascript"> 

2. $(docuraent).ready(function() { 

3. var textoVer = '<a href="#" style="color:#666; text-decoration:none;"> 

Ver resposta</a>'; 

4. S('dd*).css(*display', 'none'); 

5. S('dt').after(textoVer); 

6. $('a').click(function() { 

7. if ($(this),text() == 'Ver resposta') { 

8. $(this) .next() .next(). toggleO; 

9. S(this).textCFechar’); 

10. $(this).next() 

11. .css({ 
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12 . 


13. 

14. 

15. 

16. 


17. 


18. 


19. 

20 . 
21 . 
22 . 


23. 

24. 


border:'lpx solid #c30’, 
padding:'5px 10px', 
background:'#ff9' 

}) 

.slideToggle('slow'); 

} else { 

$(this). text(’Ver resposta'); 

S(this).next().siideToggle(’slow'); 
S(this).next().next().toggle(); 

} 

}); 

}); 

</script> 


♦] [arquivo-9.1b.html] 


Codigo comentado: 

Linha(s) Descrgao 

Linha 3 Criou-se uma variavel para corner a marca^ao HTML para os 

links que iriio revelar e esconder as respostas. 

Linha 4 O script dctermina o seguinte: encontre todos os clcmcntos dd 

no documento e, para estes, vale a declara^ao CSS definindo que 
nao sejam rendcrizados, ou seja, esconda-os. F.sta linha faz que 
todasas respostas e os links para o mdice desaparegam da pagina. 
Faga uma copia do arquivo, retire todo o script da pagina, exceto 
esta linha, mas, cuidado, nao retire as linhas 1,2,23 e 24 que sao 
o container do script. Salve o arquivo com o nome arquivo-9.2b. 
teste.html e visualize-o no navegador. 

Linha 5 Aqui a agao c a seguinte: encontre todos os clcmcntos dt (note 

que os clcmcntos dt marcam as perguntas) da pagina e insira 
logo apos cada um deles a marcagao HTML para o link que ira 
mostrar as respostas (definida na linha 3). Agora e como sc voce 
tivesse esse link imcdiatamcnte depois de cada uma das pergun¬ 
tas. Tais elementos nao estarao escondidos por enquanto. Abra 
o arquivo arqui vo-9.2b. teste.html que salvou conforme sugerido 
no item anterior e acrescente nele as linhas 3 e 5 do script. Salve- 
as e visualize no navegador. Agora, alem das perguntas, aparece 
logo abaixo delas o link "Ver resposta”. Clique o link e nada 
aconteccra. 

Linha 6 Lembre-se de que o elemento a acaba de ser inserido na marca¬ 

gao, logo apos o elemento dt, e nesta linha esta dito: quando for 
clicado o elemento a, isto e, “Ver resposta”, execute a fun^ao que 
se segue. 
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Linha(s) 

I.inha 7 


Linha 8 


Linha 9 

Lin has 10 a 15 


Linha 16 


Oescri^ao (cont.) 

Esta linha dcclara que seeferue um teste conditional e,dcpendendo 
do resultado, o script executara uma dc duas a^oes possiveis. O 
teste e o seguinte: se o conteudo textual do elemento a lor “Ver 
resposta”, execute o que se segue, senao va para a linha 17 (decla- 
ra^ao else). Aqui o seletor S(this) tem o mesmo significado que 
cm JavaScript, ou seja, neste caso se refere ao elemento que acaba 
de scr clicado (a). O metodo text() recupcra o conteudo textual 
de um elemento. O teste resulta verdadeiro, pois inicialmente o 
texto do elemento a e “Ver resposta”, e assim o script em questao 
continua na linha seguinte. 

Aqui esta dito o seguinte: encontre o elemento que vem depois do 
elemento a que voce clicou e, a seguir, o elemento que vem depois. 
Esclarecendo: trata-se do segundo elemento apos o a. Sabendo 
que o elemento a esta logo apos o elemento dt e examinando a 
marca^ao, verifica-se que depois do elemento a vem um elemento 
dd com a resposta c,depois desse outro elemento,dd com o link para 
o t'ndice. £ esse link o alvo desse cncadeamento e sobre ele aplicar- 
se-a o metodo togleO, ou seja, mude a visibilidade dele. Como se 
inicia escondido (veja a linha 4), aqui sera revelado. Resumindo: 
se o usuario clicar “Ver resposta” revele o link para o indice. 

Aqui se esta substituindo o conteudo do elemento span, que 
atualmente e “Ver resposta” por “Fechar”, ou seja, ao se revelar a 
resposta, o link passara de “Ver resposta” para “Fechar” 

Defini^ao das dedarafdes de estilos para os conteiidos a ser 
revelados. Aqui esta dito o seguinte: aplique as regras de estilo 
ao elemento que se segue ao elemento clicado. O elemento que 
content o link clicado e um span e, logo depois dele, encontra-se 
o elemento dd que content a resposta a pergunta. As regras de 
estilo definem unta borda, um padding e uma cor de fundo para 
o texto da resposta a ser revelada. 

Ncsta linha, defittiu-sc o efeito de revela^ao do conteudo. Op- 
tou-se por ntostrar o conteudo fazendo que a parent segundo 
um movintento vertical de cima para baixo. Salve uma copia do 
arquivo-9.1b.html, substitua essa linha por fadeln(2000) e veja o 
resultado no navegador, depois substitua por show(lOOO) e veja o 
resultado. Nessa linha termina a execufao do script deterntinado 
pelo resultado do teste condicional iniciado na linha 7 e o script 
pula os comandos dentro de else na linha 17, nao encontrando 
nada mais depois dele, encerrando-se a a^ao desencadeada pelo 
script. Assim, a situa^ao atual e a seguinte: a resposta esta a vista, 
anterior a esta existem um link “Fechar” c, depois dela, um link 
“Itidice”. Sc o usuario clicar o link “Itidice”, simplcsmente ini para 
a respective pergunta no ini'cio da pagina.Se clicar o link “Fechar”, 
cstara ativando novamentcoscript na sua linha 6. Agora ociclose 
repete com a diferen^a de que o teste condicional resulta falso. 
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Linha(s) 
Linha 6 

Linha 7 


I.inha 18 
Linha 19 


Linha 20 


Descri^ao (cont.) 

O clique do usuario agora ocorreu no elemento a conrendo o 
tcxto “Fcchar” (veja o comentario anterior para a linha 9). 

Agora o teste resultou falso, pois o texto do link nao e “Ver res¬ 
posta” e sim “Fechar” Em consequencia, o script vai para a linha 
17, que marca o infcio das a^oes para o caso de a condicional 
retornar falsa. 

Clicado o link “Fechar” a primeira aqao e a rroca do texto do 
link de “Fechar” para “Ver resposta”. 

Esta linha estabelece o seguinte: esconda a resposta usando o 
cfeito de desaparecer segundo um movimento vertical de baixo 
para cima.Aqui se sugere que voce modifique o script, na copia 
1'cita anteriormente, usando fadeOut() e hide() c, depois, usando 
um tipo de efeito para revelar e outro para mostrar. 

Aqui se esta escondendo o link para o indice. Experimente retirar 
esta linha e ver o resultado no navegador. 


Terminado o desenvolvimento ecom a pagina funcionando como planejado, faga 
o seguinte: abra a pagina no navegador, desabilite JavaScript e recarregue a pagina. 
Algum conteudo sc pcrdeu? Algum conteudo estranho a pagina apareceu? 

Lembre-se de que a pagina deve permanecer funcional e logica mesmo com 
JavaScript desabilitado. Nada de desabilitar JavaScript e aparecer na pagina um 
link ou um texto do tipo “Ver Resposta" ou “Fechar”. Muito menos desaparecer 
uma resposta, ou todas, ou o indice. Isto e JavaScript nao obstrutivo usado para 
incrementar a experience do usuario. 

Pode-sc, entao, concluir que ao final desta primeira ctapa o efeito que se aca- 
bou de desenvolver trouxe como resultado uma pagina bem mais interessante e 
com apelo visual bem mclhor que o da pagina basica. Contudo, alguns pontos 
podem c devem scr mclhorados. 


Segundaetapa 

Nesta etapa, o objetivo sera retirar a estiliza^ao e marcagao do script em questao. 
Um dos fundamentos do desenvolvimento, segundo os Padroes Web, preconiza 
independence entre camadas de marcagao, apresentayao e comportamento. 

A proposito da afirmativa anterior, e interessante fazer um comentario. 

Uma primeira corrente de desenvolvedores preconiza e defende veemente- 
mente uma interpreta^ao dos Padroes Web de forma absolutamente rigida e 
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scm abrir concessocs. Nao admitcm, cm hipotese alguma o uso dc clcmcntos 
adicionais na marcagao, defendem o minimalismo do codigo e sao contraries 
a qualqucr mistura das camadas dc apresentagao, marcagao e comportamento, 
enfim, sao rigidos na interpretagao da letra das normas. A segunda corrcnte dc 
desenvolvedores considera os Pad roes Web uma bobagem e, ainda, desenvolve 
sites com tabelas e scripts ultrapassados. A terceira corrente tern consciencia dos 
Padroes Web, conhece seus tundamentos e os aplica em seu dia a dia de trabalho, 
contudo nao abrindo mao dc documentos validos se permitem concessoes, como 
o uso de um div a mais no codigo para encurtar o caminho para a consecugao 
de determinado objetivo. Voce e livre para aderir a qualquer um dos tres grupos, 
mas os codigos desenvolvidos neste livro seguem a filosofia dos grupos nao 
extremistas, que parecc a mais apropriada ao mundo real do desenvolvimento. 
Rigidez de interpretagao e uma postura teorica e utopica. Ignorar os Padroes 
Web c sc dedarar ultrapassado. 

Inicic idcntificando, no script anterior, quais as linhas que podem ser movidas 
para outra camada. Sao elas: 

3. var textoVer = '<spanxa href="#" style="color:#666; 

text-decoration:none;">Ver resposta</ax/span>'; 

4. S('dd').css(’display *, ’none'); 

10. S(this).next() 

11. .css({ 

12. border:'lpx solid #c30', 

13. padding:'5px 10px', 

14. background:'#ff9' 

A linha 3 con tern marcagao e estilizagao. Passe a marcagao para o HTML da 
pagina e a estilizagao para as CSS. A marcagao para os links deve ser inserida logo 
ap6s cada elemento dt. Veja a seguir as alteragoes a introduzir. 

► HTML: 


<h3>Perguntas e respostas</h3> 

<dl> 

<dt id="css">0 que significa a sigla CSS?</dt> 

<dd>Ver resposta</dd> 

<dd>Fechar</dd> 

<dd>CSS e a sigla para Cascading Style ... 


Fazendo isso, veja, na figura 9.4, o que acontece com a pagina basica. 
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Figuro 9.4 - Pagina paro FAQ: segundo etapa - marcagao. 

Acabou-se de cometer, propositadamente, um engano muito comum quando 
se desenvolve sent pensar Padroes Web. Introduziram-se componentes neces- 
sarios ao funcionamento do script em questao, na renderizayao da pagina. E o 
que acontece quando JavaScript esta desabilitado? O que fazem aqueles links 
na pagina? Absolutamcnte nada! Retire-os dali rapidamentc. 

Embora csta nao seja a solugao, veja comen tarios adicionais sobre essa inser^ao 
de codigo. Talvcz voce esteja se pcrguntando o porque de nao se ter sugerido o 
uso de um elemento neutro como span ou, mais apropriadamente, o elemento a, 
que c o semanticamente correto para marcar o link. 

Se fizer isso, estara invalidando sua marcagao HTML, pois o elemento dl 
ad mite somente os elementos dt e dd como elementos-filho. Nao se pode acres- 
centar nenhum outro elemento dentro dele. Na sequenda do exemplo, voce ira 
efetivamente usar o elemento dd para container do link em uma solu^ao um 
pouco diferente da sugerida aqui e podera, entao, constatar por si mesmo o que 
acontece, alem de um codigo invalido, se usar outro elemento que nao dd. Adiante, 
esse assunto sera retomado. 

O problema e o seguinte: voce precisa do elemento dd naquela posi^ao, mas 
nao pode permitir que o texto seja renderizado. Voce seria capaz de apontar a 
solu^ao? 
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navegador, ncstc caso, nao constroi o DOM corrctamente cm conscquencia da 
marca^ao invalida. 



Em qualquer situagao de desenvolvimento de documentos para a web, valide 
constantemente seu codigo ao longo do processo de criagao. Sempre que tiver 
o controle da manutengao de um documento ja existente. valide-o tamb6m. 


Sugestao: salve uma copia do arquivo-9.1c.html, modifique a marcagao substi- 
tuindo dd por span ou a c visualize o rcsultado no Fircfox e no Internet Explorer. 

Antes de passar para a etapa seguinte, desabilite JavaScript no navegador e 
visualize sua criagao. Tudo certo? 

Sc o usuario cstiver navegando com o uso do teclado, a pagina sera inacessivel 
a elc, a mcnos que desabilite JavaScript. Expcrimente navegar com o uso do te¬ 
clado na pagina gcrada pclo arquivoda solu^aoapresentada na primeira etapa c, 
depois, va a pagina do arquivo dessa etapa e realize o mesmo proccdimemo. Voce 
vai constatar que, na primeira, voce abre as respostas com o teclado normalmente 
e, na segunda, nao. Elementos que nao sao links nao sao acessiveis via teclado, 
a menos que voce crie script para tal. Como exercicio, modifique o script dessa 
solugao para torna-la acessivel via teclado. 


Terceira etapa 

Nesta etapa, sera efetuada uma mudanya na apresenta^ao dos links para abrir 
e fechar as respostas. Em vez de links textuais, sera utilizada uma imagem como 
link. £ comum encontrar, na web, imagens de um sinal de mais e menos (+/-) 
para tais links. Na solu^ao que sera dcsenvolvida, voce utilizara a imagem de olho 
aberto c fechado. Nao esta cm questao o design da solu^ao, o que importa e o 
objetivo final do estudo: mostrar a tecnica de uso de uma imagem. Conhecendo 
a tecnica, voce pode usar a imagem que melhor se adapte a seu projeto. 

Complementarmente, nesta soluyao, ao contrario da anterior,considere a nave- 
ga^ao via teclado. Para que um elemento seja acessado via teclado, ha duas op^oes 
de marca^ao: marcar com o elemento a (elemento para marcar links) ou definir 
o atributo tabindex que se destina a estabelecer uma ordem de tabulagao. 

O uso do atributo tabindex cvalido para controlcs de formulario (porexcmplo: 
input, textarea e button). Se voce definir esse atributo para um elemento paragrafo, 
por exemplo, este sera acessado pelo teclado normalmente, contudo sua marca- 
yao nao sera validada. Priorize a validagao e, assim, opte por usar um link em 
elementos que devam ser acessados pelo teclado. 
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No cxemplo cm questao c na maioria dos scripts quc depcndem dc um clique 
do ponteiro do mouse para disparar uma a<;ao, usar um link e, sem diivida, uma 
solu^ao semanticamente corrcta.A final idadedc marcarcomo link e proporcionar 
acesso via tcclado, entao sc criara um link mono. O desrino de um link mono 
e o sinal tralha ou jogo-da-velha (#) e a marca^ao segue a sintaxe mostrada a 
seguir: 

<a href="#">Link morto</a> 

Com cssas informacocs c tendo cntcndido o funcionamcnto do script desen- 
volvido na ctapa anterior, crie um script para revelar e esconder as respostas da 
FAQ com um clique cm uma imagem. 

Veja, na figura 9,5, o resultado final proposto para essa etapa. 
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Figure 9.5 - Pagino para FAQ: terceira etapa. 

As regras CSS necessarias a esta solu^ao sao as seguintes: 

.estilo-um {/* 3a usada na solugao anterior, estiliza o texto da resposta revelada */ 
borderrlpx solid *c30; 
padding:5px lOpx; 
background:#ff9; 

} 

img {border:none; display:none;} 
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A novidade aqui c o uso dc uma regra CSS para rctirar a borda azul padrao quc 
os navcgadores colocam cm volta de uma imagcm quando esta e um link. Lcmbrc-sc 
de que voce ira utilizar a imagcm como sc fosse um link morto para proporcionar 
acesso via teclado. Fa^a uma copia do arquivo desta etapa, rerirc essa regra CSS, 
salve o arquivo e visualize-o no navegador. Constate o aparecimento de uma borda 
horrivel em volta de cada um dos (nao tao lindos e azuis) olhos. 

A marca^ao para cada resposta sera corno a mostrada a seguir: 

<h3>Perguntas e respostas</h3> 

<dl> 

<dt id="css">0 que significa a sigla CSS?</dt> 

<ddxa href="#"xiiig src^'" alt="" /></ax/dd> 

<dd>CSS e a sigla para ...</dd> 

<dd><a href="#indice">lndice</ax/dd> 


Tal como sc tez para o link quc leva ao indice, inscriu-sc marca^ao para scrvir 
de container a imagcm do olho. Note que o atributo src da imagcm esta vazio. Por 
que nao optar por simplesmente omitir o atributo? Porquc a pagina nao passaria 
no validador, pois esse atributo e obrigatorio. Mas a inser^ao dele, ainda que 
vazio, ira acarretar um problema que sera tratado a seguir. 

Voce seria capaz de dizer qual a finalidade da declara^ao display:none, mostra¬ 
da anteriormente na regra CSS, para a imagem? Por que esconder a imagem se 
precisara dela na pagina? 

A razao c a scguintc: quando ha uma imagcm inserida na marcagao cujo 
atributo src leva a um endereyo no qual nao existe uma imagem, o navegador 
Internet Explorer renderiza um icone padrao, para indicar a existencia de uma 
imagcm quebrada. Se JavaScript for desabilitado no navegador, tal icone ira apa- 
rccer no Internet Explorer. 

O script jQuery e mostrado a seguir: 

1. <script type="text/javascript"> 

2. S(document).ready(function() { 

3. var olhoAberto » 'olho_aberto.gif; 

4. var olhoFechado = ’olho_fechado.gif; 

5. var olho = SC'dd > a > img'); 

6. SC'dd + dd').hide(); 

7. $(olho).attr('src', olhoFechado).show(); 

8. S(olho).click(function(event) { 

9. event.preventDefaultO; 

10. if ($(this).attr('src') == olhoFechado) { 
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11 . 


12 . 

13. 

14. 

15. 


16. 


17. 


18. 

19 

20 . 

21 . 


22 . 

23. 


$(this).attr('src', olhoAberto); 

S(this).parent().parent().next().next().show(); 

S(this).parent().parentO.next().addClass('estilo-um') 
.slideToggle('slow’); 

} else { 

S(this).attr('src', olhoFechado); 

$(this) .parentO .parentO .next () .next() .hi de(); 

S(thi s). parentO. parentO. next().addOass(' esti lo-um’) 
.slideToggle('slow’); 

} 

}); 

}); 

</script> 


♦] [arquivo-9.1d.html] 


Cotligo comentado: 


Linha(s) 

Linhas 3 e 4 


Linha 5 


I.inha 6 


Linha 7 


Descrgao 

Criarain-se duas variaveis para armazenar o caminho para a 
imagem do olho, com a finalidade de economizar digita<,ao 
posterior no script. Note que, nestc caso, a imagem foi gravada 
na mesma pasta que o arquivo c talvcz voce esteja considcratido 
desncccssaria a cria^ao das variaveis. Imagine esta situa^ao que 
vem se tornando muito popular na constriujao de sites: contratar 
servi^os de terceiros para hospedar imagens. Nesses casos, o 
caminho para a imagem, normalmcnre, e um endcrc^o enorme 
repleto de nuineros e as variaveis criadas se justificam. 

Criou-se uma variavel para definirum seletorjQuery que tern como 
alvoa imagem do olho. Note,na marca^ao mostradaanteriormente, 
que o elemento-alvo imagem e filho do clemento a, que, por sua 
vez, e filho do elemento dd, dai o seletor dd > a > img. 

Aqui esta dito o seguinte: csconda todo elemento dd que se cn- 
contra imediatamente apos um elemento dd. Em cada resposta, 
ha tres elementos dd que se seguem.entao e facil concluir que este 
metodo jQuery ira esconder o segundo (content as respostas) e 
o terceiro (contem o link para o indice) elemento dd. deixando 
a vista o primeiro (contem a imagem do olho). 

Nestalinha.jQueryselecionatodosos elemcntosda variavel olho 
(os elementos imagens inseridos na marca^ao) e nclcs coloca o 
atrihuto sre com o valor da imagem de um olho fcchado. A seguir, 
torna esse elemento visfvel, pois estava oculto por regra CSS cm 
razao da renderiza^ao do icone indicador de imagem quehrada 
no IE como explicado anteriormente. O script e executado ate 
aqui quando a pagina e carregada e aguarda um clique no olho 
para continuar. O script fez o seguinte: escondeu a resposta e o 
link para o indice (linha 6) e inseriu o olho fechado (linha 7). 
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Quarta etapa 

Seria muito bom se a FAQ cm questao oferecesse a facilidade ao usuario de ele 
nao ter que dicar o link fechar toda vez que passasse para a visualizagao de outra 
resposta. Na verdade, ele nao c obrigado a fechar uma resposta para revelar outra, 
podendo abrir as respostas uma de cada vez, mas isso aumentara o contcudo na 
tela e a rolagem vertical tambem, enchendo a tela de respostas e dificultando a 
consulta a uma resposta revelada anteriormente. 

Nesta etapa, e fundamental que o usuario aperfeigoe sen script de tnodo a 
sempre que uma resposta for revelada, a anterior que tenha sido revelada fecha- 
ra automaticamente. Desta forma, havera sempre uma resposta na tela a cada 
clique do usuario. 

Suponha que o usuario tenha iniciado a leitura com a primeira resposta e, a 
seguir, clicado para abrir a segunda resposta. Veja, na parte superior da figura 
9.6, o instante logo apos o clique para abrir a segunda resposta e, na tela inferior, 
o fim da animagao prevista no script. 


Figura 9.6 - Pagina para FAQ: quarta etapa. 
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A regra CSS utilizada para csta solu^ao c a mesma que sc usou para a classe 
estilo-um, que define borda, padding e cor de fundo para a resposta. 

O script jQuery c mostrado a seguir: 

1. <script type="text/javascript"> 

2. S(document).ready(function() { 

3. var textoVer = '<a href=”#" style="color:#666; text-decoration:none;" 

class="ver">Ver resposta</a>'; 

4. SCdd'J.cssCdisplay', 'none'); 

5. SCdt').after(textoVer); 

6. $(’.ver’).click(function(event) { 

7. event.preventDefault(); 

8. S(this).text(*'); 

9. S(this).next() 

10. .addClass('estilo-uin') 

11. ,slideDown(1500) 

12. .siblings('dd:visible').siideUp('fast'); 

13. SCthisJ.nextO.siblingsCddivisible'J.prevO.textC'Ver resposta'); 

14. }); 

15 }); 

16. </script> 

♦1 [arquivo-9.1e.html] 

Codigo comentado: 


Linha(s) Descrigao 

Linha 3 Criou-se uma variavel para armazenar o link para ver a resposta. 

Aqui, optou-se por criar a marca^ao e a estiliza<;ao via jQuery e 
atribuiu-se a classe denominada ver o elemento link. Utilizou-se o 
elementoa para links,com a finalidadedegaranriracesso via teclado. 
Note que, nesta solu^ao, nao foi necessario uni link para fechar a 
resposta, ja que uma resposta revelada fechara.de modo automatico, 
outra eventualmente aberta. 


Linha 4 Esta voce conhece das etapas anteriores. 

Linha 5 Inseriu-se a marcagao HTML do link para ver a resposta, imediata- 
mente apos o elemento dt que content a pergunta. 

Linha 6 Ao se clicar o elemento com a classe denominada ver (o link para 
ver a resposta), o script entra em a^ao. 

Linha 7 Tern o mesmo eteito de return false; da linguagem JavaScript, evi- 
tando que o navegador siga o link; no caso em questao, a janela rola 
para o topo. 

Linha 8 Retira o texto do link para mostrar a resposta. 
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Linha(s) Descriqao (cont.) 

Linha 9 Seleciona o elemento quc se segue nn marca^ao ao elemento clicado. 

E o elemento dd que content a rcsposta. Nao esquega que elementos 
inseridos com uso do script passam a fazer parte do DOM, ou seja, 
tudo se passa como se efetivamente estivessem presentes na marca^ao, 
embora voce nao consiga visualiza-los no codigo 1ITML da pagina. 

Linha 10 Estiliza, adicionando Lima classe que consta das CSS, o texto da 
resposta. 

Linha 11 Revela a resposta. 

Linha 12 Seleciona todos os elententos-irmao do elemento dd - Sthis).next() 
- que sejant tanibem dd e estejam visiveis - siblings('dd:visible') 
e esconde-os por mcio do efeito slideUpO a uma velocidade de L5 
segundo. Fechamcnto da resposta quc se revelou anteriormente.. 

Linha 13 Esta linha destina-se a repor o texto do link para ver a resposta 
que esta sendo fechada. Experimente rerirar essa linha, visualizar 
a pagina no navegador e constatar que para uma resposta fechada 
automaticamente, nao ha mais como reveld-la outra vez. 

Sugestdes: 

■ Fa^a uma copia destc arquivo e experimente os cfcitos hide(), show(), fadeln() 
e fadeOutO, com dilerentes velocidades. Depois, altere o disparador do evento 
de click para mouseover,mouseout,mousemove, keydown, keyup (estes dois ultimos so 
para navega^ao por teclado). 

■ Nesta solu^ao, nao se mostra o link para o indice quando se revela a res¬ 
posta. Modifique o script para mostrar o link. Dica: adicione, via script, 
classe(s) aos elementos HTML para viabilizar a soluyao. Por exemplo: 
use S('dt + dd').addClass('resposta-oculta'). Utilize o seletor de atributo 
S('a[href="#indice"] ') para selecionar o link para o fndice. 


Experimente sentpre, pois este e o ntelhor caminho para o aprendizado. 


Quinta etapa 

Nesta quinta etapa, sera desenvolvida uma soluyao na qual o usuario, ao entrar 
na pagina da FAQ, encontrara somente a lista das perguntas c uma instru^ao 
orientando-o a clicar uma pergunta para revelar sua resposta. 

O efeito final dessa solu^ao podc ser visto na figura 9.7, ondc constant, na 
parte superior, o estado inicial da pagina ao ser carregada e, na parte inferior, 
o resultado apos o usuario ter clicado a primeira pergunta. O clique em outra 
pergunta fecha automaticamente a resposta anterior ja revelada. 
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Figure 9.7 - Pdgina pare FAQ: quinta etapa. 

Observe a seguir os codigos para essa soluyao. 

► CSS: 

.invisivel {display:none;} 

.vi si vel-final { 

border:lpx solid #c30; 
padding:5px lOpx; 
background :#ff9; 

} 

ol li a { 
color:blue; 
text-decoration:none: 

} 

.cor-um {coloured;} 

.cor-dois {color:blue;} 
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► jQuery: 


1. <script type=”text/javascript"> 

2. S(document).ready(function() { 

3. $('dt, dd').addClass('invisivel'); 

4. $(’ol').after('<p>Clique an uma pergunta para visualizar a resposta</p>'); 

5. $('ol li a').click(function() { 

6. S('dt').css({display:'none'}); 

7. $(this).removeClass('cor-dois').addClass(’cor-um'); 

8. $(this).parent().siblings().chi1drenC).addClass(’cor-dois'); 

9. var idClicado ■ S(this).attr(’href'); 

10. $(idClicado + ' + dd *).sib1ings('dd:visible').hide(); 

11. S(idClicado).siideDown(1500); 

12. SCidClicado + ' + dd').fadeIn(2500).addClass('visivel-final'); 

13. SCidClicado + ' + dd + dd’).show(); 

14. }); 

15. }); 

16. </script> 



[arquivo-9.1f.html] 


Codigo comentado: 

linha(s) Descri^ao 

Linha 3 Inserc a classe invisivel em todos os elemenros dt (esre elemento 
content a pergunta, logo acima na resposta) e dd (texto da resposta 
e link para indice logo abaixo da resposta). 

Linha 4 Insere um paragrafo, logo apos o indice, contendo urn texto expli¬ 
cative) do funcionaniento da pagina. 

Linha 5 O script entrant cm a^ao quando se clicar o texto de uma pergunta. 

Linha 6 Retira a pergunta anterior quando se revela uma nova resposta. Sem 

esse ntetodo, a cada resposta revelada, as perguntas logo acima dela 
permanecerao no lugar, uma embaixo da outra. Experimente retirar 
esta linha e navegar nas respostas. 

Linha 7 Atribui a classe cor-um (vermelha) a pergunta clicada, com a finali- 
dade de destaca-la. Remove a classe cor-doi s (azul) se presente no 
elemento. 

Linha 8 Selcciona todos os elementos a no indice, que sao irmaos do ele¬ 
mento clicado, e aplica neles a classe para a cor azul, garantindo 
que somente a pergunta clicada sera destacada na cor vermelha. 
Para melhor entender a explica^ao para as linhas 7 a 9, considere 
que o usuario realizou um segundo clique no link. Se quiser tentar 
entender a logica do script partindo do primeiro clique do usuario, 
talvez tenha dificuldades para compreende-la. 

Linha 9 Armazenou-secm uma variavelo valor do atributo href do elemento 

a clicado (pergunta clicada). 
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Linha(s) 

I.inha 10 


I.inha 11 

Linha 12 
Lin ha 13 


Oescri^ao (cont.) 

Aqui o seletor-irmao adjaccnrc (seletores do ripo E + F) - S(idCl i cado 
+ ' + dd ') seleciona o elcmcnto dd que sc segue imediatamente ao 
elemento cuja i d e o valor da variavel i dCl i cado. Se voce acompanhar 
atentamente a marca^ao HTML, constatara que se selecionou a 
resposta a pergunta clicada. A seguir, escolheu-se, entre os irmaos 
desse elemento, aquele que se encontra visivel (dd: visible); trata-se 
da resposta revelada que se escondeu. Resumindo: esta linha es- 
conde a resposta revelada quandoo usuario clica para revelar outra 
resposta. 

Revela a pergunta logo acima da resposta cm uni efeito de movimento 
vertical de cima para baixo (slideDownO). 

Revela c estiliza a resposta a pergunta clicada. 

Revela o link para o indice logo abaixo da resposta. 


Com a conclusao dessa quinta etapa, finalizou-se a explica^ao dos fundamen- 
tos basicos para revelar e esconder conteudos de uma FAQ com o uso de jQuery. 
Utilizou-se uma FAQ CSS como exemplo para desenvolver os codigos, mas os 
conceitos se aplicam a qualquer tipo de conteudo, incluindo menus e imagens. £ 
importante que voce tenha entendido a logica e o funcionamento de cada script 
mostrado ncssas cinco ctapas. 


Os exemplos mostrados foram desenvolvidos para uma marcagao HTMLem 
uma pagina sem outro tipo de conteudo. Em um site real, a FAQ on outro con- 
tetido qualquer no qual se aplicaria jQuery estariam inseridos cm uma pagina 
com colunas de navega^ao, topo, rodape etc., com seus divs, paragrafos, ul, ol, dt, 
dl, dd, hi, h2 e uma scric de outros elementos HTML que compoe uma pagina 
web. Os seletores jQuery devem selecionar somente os elementos envolvidos nos 
conteudos a animar. Assim, se a FAQ em questao estivesse inserida em uma pa¬ 
gina web, seria necessario prever mecanismos para que o script nao selecionasse 
elementos fora da marca^ao da FAQ. 


Uma solu^ao seria criar um container para a area da marcayao HTMLonde 
sera aplicado o script e fazer referenda a esse container, como elemento-raiz para 
todos os seletores jQuery. Observe os codigos a seguir. 


Material com direitos autorais 



Capitulo 9 ■ Revelando conteiidos 


265 


► HTML: 

<div id="topo"xp>Topo do site</px/div> 
<div id="principal"> 

<hl>Titulo da pagina</hl> 
<p>Paragrafo</p> 

...mais conteiido... 

<h2>FAQ CSS</h2> 

<div id="faq"> 

... HTML a aplicar jQuery ... 

</div> <!— Fin do div#faq —> 

...mais conteiido... 

</div> <!-- Fim do div#principal --> 
<h4>Navegagao</H4> 

<1i>Link l</li> 

<1i>Link 10</li> 

</div> 


Os seletores jQuery teriam uma sintaxe como a mostrada a seguir: 
$(*#faq p'); 

$('#faq a.ver').click(function() { 

// script aqui 
}); 

$('#faq' + idClicado + ' + dd'); 

$('#faq dt'); 


9.2 Pagina de notkias 

Para cnccrrar o assunto proposto ncstc capitulo, voce ira cstudar uni caso dc 
aplicayao pratica bem mais abrangente que a FAQ. Praticamente todos os blogs e 
muitos sites utilizam a tecnica de apresentar o titulo de uma materia, seguido de 
um pequeno trecho descritivo do conteiido da materia c um link do tipo “Saiba 
mais...” convidando o usuario a clicar o link e ler a materia. 

Inspirando-se nessa forma de apresenta^ao de materia ou noticia, voce ira 
aplicar o que aprendeu sobre revelar e esconder conteiidos, etn uma pagina de 
noticias, aproveitando para estudar o seletor de negagao, ou filtro de nega^So 
jQuery, o loop com o metodo eachQ e alguma manipula^ao de arrays. 
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Marca^ao basica 

Tal como fez para a FAQ, voce utilizara uma marcagao HTML basica na qual 
consta um total de quatro non'cias. O script seni desenvolvido de mode a ser 
aplicavel a qualquer numero de non'cias. Considere uma insergao dinamica dc 
noticias. 

A renderizagao da pagina basica de non'cias, para a qual o script sera desen¬ 
volvido, e mostrado na figura 9.8. 
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Figura 9.8 - Pagina basica para noticias. 

O documento em questao encontra-se cm sua forma mais elementar, com 
alguma estilizagao basica. Conforme se pode observar na figura 9.8, as non'cias 
vao sendo inseridas com seu texto complete, podendo corner (iguras ou outro 
tipo qualquer de conteudo. Ainda que o usuario desabilite suporte as CSS em 
seu navegador ou abra a pagina em um navegador de texto, tera acesso a todas 
as noticias e nenhum conteudo sera perdido. 

A folha de estilo e a marcagao HTML da pagina basica para os exemplos sao 
mostradas a seguir. 

► CSS: 

1. <style type="text/css" media="all"> 

2. body {width:400px; font:12px/1.2 Arial, Helvetica, sans-serif; margin:10px 
auto 0 auto; padding:0;} 

3. hi {width:415px; color:#c60; font-size:20px; padding-left:5px; border- 
bottom: lpx solid #c60;} 
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19 SO.sm').text('Saiba mais...'); 

20 }); 

21 . }); 

22. </script> 



[arquivo-9.2b.html] 


Codigo comcntado: 

Linha(s) Descri^ao 

Linha 3 Analise este seletor por partes. O sinal estrela (*) identifica o 

seletor universal, que encontra todos os elementos HTML. £ 
o seu conhecido curinga. A situaxe *:not(h2.tit) significa o sc- 
guintc: todos os elementos mcnos os cabe^alhos h2 com a classe 
tit. Entao, .noticias *:not(h2.tit) e um seletor composto que 
seleciona tudo, dentro dos divs com a classe noticias, menos o 
titulo com a classe tit, e esconde hide(). Resumindo: todos os 
conteiidos serao escondidos menos seus titulos. 

Linha 4 Seleciona os titulos das noticias e insere dentro deles um link 

denominado “Saiba mais...” com a classe sm. O metodo appendO 
insere marca^ao HTMLem um container existente. Esta linha 
resulta na seguinte marca^ao: <H2>Noticia xxx <br /><a href="#" 
class*”sm">Saiba mais...</a></h2>. Criou-se um link dentro 
do titulo da noticia. A renderiza^ao sem esrilizagao para essa 
marca^ao faria o texto do link ser renderizado ao lado do texto 
do titulo e em fonte do tamanho e cor da do titulo. Alteraram- 
se a posigao, a cor e o tamanho do link com declara^oes CSS 
para a classe sm. Link dentro de um cabegalho? Uma agressao a 
marca^ao em conformidade com os padrdes? Optou-se por essa 
solu(,ao, propositadamente, com a finalidade de alertar quanto a 
escolha dos metodos jQuery. O script em questao ini funcionar 
sem problemas, mas aos olhos atcntos de um desenvolvedor 
consciente dos Padrdes Web essa marca^ao scria reprovada. Ou 
nao? Excesso de prcciosismo? Alguem poderia argumentar que 
a marcagao extra nao aparece no codigo da pagina. Cabe a voce 
decidir o que fazer. Como sugestao, utilize um outro metodo 
jQuery no lugar de appendO. O que voce acha de after()? 

Linha .5 lnsira o link para fechar uma noticia aberta. A inser^ao se faz 

dentro do div que contem a noticia logo em seu infcio prependO, 
pois se descja o link em cima. Se tivesse usado appendO, o link 
teria ficado dcbaixo do div. Seria melhor cmbaixo? Talvez sim. 
O Icitor chegaria ao final da noticia e nao havcria necessidadc 
de rolar de volta para cima com a finalidadc de cncontrar o link. 
Utilizou-sc prependO com o objetivo de destacar a diferen^a para 
appendO. 

Linha 6 Imdo da a^ao quando o usuario clica o link “Saiba mais...” 


Material com direitos autorais 



Capitulo 9 ■ Revelando conteiidos 


271 


Linha(s) 
Linha 7 

Linha 8 


Linha 9 
Linha 10 


Linha 11 


Linha 12 

Linha 13 
Linha 15 
Linha 16 

Linha 17 

Linha 18 
Linha 19 


Descri^ao (cont.) 

Ja comentado anteriormenre. Mesmo efeito dc return false da 
linguagcm JavaScript. 

Entre todos os elementos ancestrais do link clicado, encontre 
aqucle cuja classc e noticias. Selecionc todos os seus filhos e 
revele-os. Acompanhe na marca^ao. Os elementos ancestrais 
do link sao, em ordem do mais proximo para o mais distante, 
h2 (o link esta dentro de uni h2), div com a classe noticias, body 
e, finalmente, html. Resumindo: sera revelado todo o conteudo 
dentro do div onde se encontra o link clicado. 

Coloca uma cor de fundo diferente (verde) no div da noticia 
revelada. 

Esta linha so causa efeito apos o primeiro clique. Destina-se a 
fechar automaricamente uma noticia revelada quando outra 
recebe um clique para revelagao. 

Devolve a cor de fundo para um div que acaba de ser fechado. 
Note que essa cor #cff (azul-clara) e a mesma declarada nas CSS 
(linha 8 das CSS). 

Devolve o link “Saiba mais...” para um div que acaba de ser 
fechado. 

Retira o link “Saiba mais...” do div que acaba de ser revelada 
Inicio da a^jio quando o usuario clica o link “Fechar”. 
Comentado anteriormente. Mesmo efeito de return false da 
linguagem JavaScript. 

Esconde todo o conteudo do div menos o titulo da noticia e o 
link. Note o selctor de negag3o. 

Devolve a cor azul ao div fechado. 

Devolve o link “Saiba mais...” ao div fechado. 


Segundaetapa 

O objetivo para esta segunda etapa e fornecer o trecho do texto que inicia a 
noticia com o link “Saiba Mais...” 

Esta solu^ao esta sendo proposta com a finalidade de estudar o uso de intera- 
gao e recupera^ao de elementos de arrays. Veja a seguir um maneira de manipular 
arrays com a biblioteca jQuery. 

Observe, na figura 9.10, o resultado final dessa solu^ao. 
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Figura 9.10 - Pagina para noticias: segunda etapa. 

Para capturar o trecho de texto que ira aparecer inicialmente antes do link 
“Saiba mais...” marque-o no HTMLda pagina usando oelemento neutro span.Till 
marca^ao e dispensavel, pois voce pode capturar o texto com jQuery. Essa op<;ao 
de captura e um exercicio para voce testar scu aprendizado. 

Na marca^ao, cada noticia recebe um elemento span no inicio do primeiro 
paragrafo como mostrado a seguir. O conteudo desse elemento ira aparecer antes 
do link “Saiba mais...” 

► HTML: 


<hl>Noticias</hl> 

<div class="noticias"> 

<h2 class="tit">Noticia um</h2> 

<pxspan>Texto da primeira noticia. Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit.</span> 

Morbi eleifend, purus ...</p> 


O desafio e identificar o conteudo de cada elemento span, capturar e escrever, 
como mostra a figura 9.10. 

A seguir, o script jQuery: 

1. <script type= M text/javascript"> 

2. $(document).ready(function() { 
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CAPITULO 10 

Efeitos em tabelas 


Neste capitulo, scrao abordados alguns efeitos da bibliotcca jQuery destinados 
a incrementar a apresentagao de tabelas de dados cm documentos para web. 
Dcstaca-se que, tambem para tabelas, continua valido o conccito de JavaScript 
tiiio obstrutivo. 


10.1 Destina^ao das tabelas HTML 

Segundo os fundamentos dos Padroes Web, as tabelas HTML se destinam a 
apresentagao de dados tabu lares. Veja alguns exemplos de dados tabulares: pesos, 
medidas, indices financeiros, pregos, resultados de competigoes etc. 

E equivocado o conccito, disseminado principalmentc por aqucles que se 
iniciam no estudo dos Padroes Web, de que as tabelas sao proibidas na marcagao 
HTML. Ao contrario, tabelas sao previstas pelo W3C, sao legais, e devem ser 
usadas para apresentar dados. 

Tabelas nao sao admitidas na construgao de layout ou para obtengao de efeitos 
de apresentagao. Essas tarefas sao de responsabilidade exclusiva das CSS. 


10.2 Marcagao de tabelas 

As Recomendagoes do W3C para a HTML preveem os seguintes elementos para 
marcagao de tabelas: table, caption, thead, tfoot, tbody, colgroup, col, tr, th c td. 

Sao dez elementos dos quais colgroup e col sao de uso especifico e tfoot des- 
tina-se a tabelas que contenham um rodape. Assim, restam oito elementos que 
deveriam estar presentes obrigatoriamente na marcagao de qualquer tabela, por 
mais simples que esta seja. 
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Quantos desses elementos voce usa na marca^ao dc suas tabclas? A maioria 
das tabclas encontradas na web usa os elementos table, tr e td. Se voce e um 
dos que usam somente esses tres elementos, estude e repense seus conceitos 
de construgao de tabclas. Nao e do escopo deste livro aprofundar esse assunto, 
contudo, para as tabelas deste capitulo, sera utilizada a marca^ao segundo as 
Recomendagoes do W3C 


10.3 Tabela de horarios de onibus 

Para explicar os efeitos propostos para este capitulo, sera utilizada uma tabela 
publicada por uma empresa de onibus fictfcia,denominada Via^ao Alfa, destinada 
a apresentar os dados tabulares referentes aos horarios de partida e chegada de 
seus onibus, bem como a classe do onibus e o preyo da passagem. Note ainda 
que nao houve preocupagao com a apresentagao de dados cocrentes na tabela, 
pois o objetivo e mostrar as tecnicas de criagao de efeitos, e nao comparar pregos 
de passagem ou duragao dc viagem. 


Marca^ao basica 

Veja a seguir a marcagao basica da tabela em questao. Antes de prosseguir com 
seus cstudos, procure acompanhar com detalhcsa marcagao HTMLe cstilizagao, 
com a finalidade dc facilitar o entendimento dos scripts dcscnvolvidos. 

► HTML: 

1. <table id="horario"> 

2. <caption>Via(;ao Alfa - Horanos</caption> 

3. <thead> 

4. <tr id="horizontal"> <!-- linha do cabegalho —> 

5. <th>Destino</th> 

6. <th scope="col">Saida</th> 

7. <th scope="col">Chegada</th> 

8. <th scope="col">Classe </th> 

9. <th scope="col">Tarifa </th> 

10. <th scope="cor>Freq&uuml;encia</th> 

11. </tr> 

12. </thead> 

13. <tfoot> 

14. <tr> <!-- linha do rodape --> 

15. <td colspan="6">Valida para o periodo de 02/10/2008 a 30/11/ 2008.</td> 

16. </tr> 

17. </tfoot> 
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18. <tbody> 

19. <tr> <!— primeira linha de dados da tabela —> 

20. <th scope="row">Brusque</th> 

21. <td>06:45</td> 

22. <td>14:30</td> 

23. <td>Convencional</td> 

24. <td>R$80,00</td> 

25. <td>Diaria</td> 

26. </tr> 

27. ... marca<;ao identica para quinze linhas intermediarias da tabela ... 

28. <tr> <!-- ultima linha de dados da tabela —> 

29. <th scope="row">Xaxim</th> 

30. <td>07:00</td> 

31. <td>14:00</td> 

32. <td>Executivo</td> 

33. <td>RS165,00</td> 

34. <td>Dom.</td> 

35. </tr> 

36. </tbody> 

37. </table> 



[arquivo-10.3a.html] 


Codigo comentado: 


Linha(s) 
Linha 1 
Linha 2 


Linhas 3 e 12 


Linhas 4 e 11 
Linhas 5 a 10 


Descriqao 

Atribuiu-se um identificador id para a tabela em qucstiio. 

Usodoelementocaption para fbrnecerumadescri<,aodanatureza 
da tabela. Em tabelas mais complexas, essa descri^ao devera ser 
complementada com o uso do atributo summary no elemento tabl e. 
O atributo summary destina-sc a informar a finalidadc da tabela c 
fornccer uma descrigao de sua estrutura. 

O elemento thead destina-se a marcar as linhas que compbem o 
cabegalho da tabela. Neste caso, a tabela contem uma linha de 
cabegalho. Esse elemento e o seletor natural para o cabegalho 
da tabela. A maioria dos desenvolvedores nao usa.erroneamente, 
esse elemento. 

Elemento tr para marcagao da linha de cabegalho. 

Marcagao das celulas do cabegalho com o uso do elemento th. A 
maioria dos desenvolvedores usa, erroneamente, o elemento td 
para marcar celulas de cabe^alha Note a presenga do atributo 
scope para fins de acessibilidade. 
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Linha(s) 

Linhas 13 a 17 


Linhas 18 e 36 


Linhas 19 a 35 


Descri^ao (cont.) 

Marca^ao do rodape da rahela com o uso do elemento tfoot. 
Parece estranho o rodape vir logo apos o cabe^'alho, mas e isso 
mesmaAs Recomenda^bes do W3C para a HTMLpreveem que 
o cabe^alho e o rodape sejam carregados na pagina antes do 
corpo da tabela que devera ser renderizada na seguinte ordem: 
cabe^alho, rodape e corpo. Isto e muito conveniente em tabelas 
com muitas linhas quedemoram a carregar. O usuario visualiza 
o cabefalho e o rodape imediatamente enquanto as linhas vao 
sendo carregadas. Esse elemento e o seletor natural para o rodape 
da tabela. A maioria dos desenvolvedores nao usa,erroneamente, 
esse elemento. 

O elemento tbody destina-se a marcar as linhas que compbem 
o corpo da tabela. Neste caso, a tabela content dezessete linhas 
em seu corpo, das quais somente a primeira e a ultima foram 
mostradas na marca^ao. Esse elemento e o seletor natural para 
o corpo da tabela. A maioria dos desenvolvedores nao usa, erro- 
ncamente, esse elemento. 

Marcagao das linhas do corpo da tabela. Note a presenga do 
atributo scope na primeira celula de cada linha para fins de 
acessibilidade. 


Na figura 10.1, mostramos a renderizagao da tabela segundo a marcagao 
basica proposta. 


V9Uero jQuery do Maujof | Tabela* - Mu/illa Flrelox 
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Figure 10.1 - Tabela sem eslilizagao. 
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Criou-se uma folha dc csrilos para a tabcla cm qucstao, mostrada a scguir. 

► CSS: 

<sty1e type="text/css" media="air> 
body { 

width:600px; 

font:80%/1.2 Arial, Helvetica, sans-serif; 
margin:30px auto; 
padding:0; 
col or:#666; 

} 

table { 

width:550px; 

border-col 1 apse:col1 apse; 
border:2px solid #999; 
margin:0 auto; 

} 

caption { 

text-align:right; 
margin-bottom:0.3em; 
border-bottom:lpx solid #333; 
padding-right:0.3em; 

} 

thead tr th { 

text-align:center; 
border-bottom:2px solid #999; 
border-left:2px solid #999; 

} 

tr td, tr th { 

padding:lpx Spx; 
text-align:left; 
font-size:0.9em; 
border:lpx dotted #333; 

} 

tfoot tr td { 

text-align:center; 
border-top:2px solid #999; 

} 

</style> 

♦1 [arquivo-10.3b.html] 

Trata-sc dc uma folha dc csrilos minima dcstinada a centralizar a pagina c 
inscrir aprcscntagao basica com a finalidade cxclusiva dc facilitar a visualizagao 
do cxcmplo. 
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Zebra par-i'mpar 

E a traditional estilizagao de linhas pares com uma determinada cor de fundo e 
impares com outra cor. O primeiro efeito consiste em simplesmente atribuir uma 
cor dc fundo a uma das linhas (par ou impar) e deixar a cor dc fundo da outra 
com a cor-padrao do fundo da tabcla. 

Na figura 10.3, veja o efeito final de uma esrilizagao zebra par-impar, obrida 
com jQucry, com uma das cores sendo a cor-padrao da tabcla. 
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Figure 10.3 - Efeito zebra par-impar, uma cor-padrao. 


A biblioteca jQuery preve os pseudosseletores :even e :odd que sc destinam a 
selecionar as ocorrencias, respectivamente, pares e impares do conjunto dc ele- 
mentos-alvo do seletor, qualquer que seja clc. 

Assim, se voce escrever o seletor $('table#horario tbody tr:odd’), estara selecio- 
nando todas as linhas impares contidas no corpo da tabela cujo id c horario. 

Agora observe o script a seguir: 

<script type="text/javascript"> 

S(document).ready(function() { 

$('table#horario tbody tr :odd').addClass(’impar*); 

}); 

</script> 

#■] [arquivo-10.4a.html] 
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Os paramctros odd ou even sclecionam os elementos-filho impares ou pares 
respcctivamente. Ao contrario dos pseudosseletores :odd e :even estudados ante- 
riormente, as ocorrencias pares sao a segunda, quarta etc., pois a contagem para 
o indice nao se baseia em contagem JavaScript e, assim, come^a cm um e nao 
zero. Desta forma, tr:nth-child(odd) seleciona as linhas impares de uma tabela, 
enquanto tr:odd, as linhas pares. 

O parametro equa^ao destina-se a selecionar elementos-filho em uma posigao 
defmida pelo resultado de uma equa^aa A forma geral da equa^ao e mostrada 
a seguir: 

x b an + b 

Onde x e a ordem numerica ondc se encontra o elemento-filho, a c b sao nu- 
meros naturais e n sao os numcros do conjunto {0,1,2, 3...}. 

Por exemplo: 

Equa^ao Sele^ao 

2n Seleciona as ocorrencias 2x0 = 0, 2x1 = 2, 2x2 = 4, 2x3 = 6 ,..., ou 

seja, ocorrencias pares. 

2n + 1 Ocorrencias 2x0 + 1 = 1, 2x1 + 1 = 3, 2x2 + 1=5, 2x3 + 1 = 7,..., ou 
seja, ocorrencias impares. 

3n + 1 Ocorrencias 3x0 + l = 1, 3x1 + 1 = 4,3x2 + 1 = 7,3x3 + 1 = 10,..., ou 

seja, ocorrencias de tres em tres. 

5n -1 Ocorrencias 5x0 -1 = -1, 5x1 -1 = 4, 5x2 -1 = 9, 5x3 -1 = 14,..., ou 

seja, ocorrencias de cinco em cinco. 

Aqui, a primeira ocorrencia resultou em um mimero negativo. Nu- 
meros negativos como result ados da cqua^ao sao ignorados para 
efeito de selc^ao. 

E facil concluir que o uso de uma equa^ao para selecionar ocorrencias aumenta 
tnuito as possibilidades de sclegao e combinagoes. 

Efeitos zebra mais complexos e dilerentes dos estudados ate aqui podem 
requerer o uso de uma equagao combinada com os metodos prev() ou next() 
destinados a selecionar elementos antes e depois, respcctivamente, do elemento 
selecionado. Por exemplo: 

Seletor Sele^ao 

$('tr:nth-child(4) Seleciona a quarta linha da coluna. 

$('tr:nth-child(4).prev() Seleciona a tcrccira linha da coluna. 

$('tr:nth-child(4).next() Seleciona a quinta linha da coluna. 
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Com a finalidade dc vcrificar seu aprendizado, antes do prosseguir a lcitura, 
fa^a uma copia do arquivo-l0.3b.html e, nele, escreva o script para obter o efeito 
zebra dois-dois mostrado na figura 10.5. 
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Figure 10.5 Efeito zebra dois-dois. 

Observe que as linhas a estilizar com cor de fundo diferente da cor-padrao 
sao as linhas: 3,7,11,1.5... c as linhas que se seguem a cada uma delas: 4,8,12,16... 
ou, dito de outra forma, as linhas: 4, 8, 12, 16... e as linhas que antecedent cada 
uma delas: 3,7,11,15... 

Assim, ha duas opg6es de script. Em ambas as op^oes, a serie de numeros a 
selecionar da um saltode quatro unidades. No exemplo em questao,sera adotada 
a segunda op^ao na qual os niimeros sao miiltiplos de quatro. 

O script e o seguinte: 

<script type="text/javascript"> 

$(document).ready(function() { 

/* seleciona os miiltiplos de quarto */ 

S(’table#horario tbody tr:nth-child(4n)').addClass('cor_um'); 

/* seleciona os anteriores aos multiplos de quarto */ 

$('table#horario tbody tr:nth-childC4n)').prev().addClass(’cor_um'); 

}); 

</script> 

A classe .cor-um reccbe a regra de cstilo mostrada a seguir: 

.cor_um (background:#bfe2d8;} 
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Progressao aritmetica 

Series de numeros nas quais cada numero e igual a seu precedente mais um valor 
constante sao denominadas de progressao aritmetica (PA). A matematica ensina 
que o primciro termo de uma PA denomina-se tcrmo inicial, o valor constante c 
a razao da PA c a formula do tcrmo gcral c: 

an = (n-l)*r + al 

Onde an e o termo de ordem n, al e o primeiro termo, r e a razao e n e a ordem 
do tcrmo. 

Aplicando a formula na primeira PA 3,7,11..., voce encontrara: 
an = (n-l)*4 + 3 => 4n - 4 + 3 => 4n - 1 


Aplicando a formula na scgunda PA 4, 8,12..., voce encontrara: 
an = (n-l)*4 + 4 => 4n - 4 + 4 => 4n 


Assim, com o uso da formula das PAs, ha uma forma mais generica de sele^ao 
sem a necessidade de emprego dos metodos prev() e next(), e o script em questao 
tern a seguinte sintaxe: 


<script type="text/javascript"> 

S(document).ready(function0 { 

$('table#horario tbody tr:nth-chi1d(4n-l)').addClass('cor_um'); 
$(’table#horario tbody tr:nth-child(4n) , ).addClass('cor_um'); 

}); 

</script> 



[arquivo-10.4c.html! 


Zebra tres cores 

A tecnica para este efeito c a mesma para o efcito anterior. Desenvolva tal solu^ao 
adotando trcs cores diferentes da cor-padrao e, assim, sua folha de cstilo con- 
templara tres classes a serem inseridas por script. As regras de estilo para essas 
classes sao mostradas a seguir: 

.cor_um {background:#d6e2e5;} /* cor azul mais clara que a da cor tres V 
.cor.dois {background:#bfe2d8;} /* cor verde-dara */ 

.cor_tres {background:#add6ef;} /* cor azul-clara */ 

Observe, na figura 10.6, o efcito final com tres cores altcrnadas. 
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Figure 10.6 - Efeito zebra tres cores. 

Note, na figura 10.6, que as tres cores de fundo se distribuem pelas linhas da 
tabcla con forme mostrado a seguir. 


1,4,7,10,13,1b. PA de razao igual a 3 e al igual a 1. 
2,5,8,11,14,17. PA de razao igual a 3 e al igual a 2 
3,6,9,12,15. PA de razao igual a 3 e al igual a 3. 


E os seletores sao 


Finalmente, o script para o efeito zebra tres cores: 

<script type="text/javascript"> 

S(document).ready(function() { 

S('table#horano tbody tr:nth-child(3n-2)').addClass('cor_ufn'); 
$('table*horario tbody tr:nth-child(3n-l)’).addClass('cor_dois’) 
$('table#horario tbody tr:nth-child(3n)').addClass('cor_tres'); 


</script> 
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Vcja os selctorcs a seguir: 

Cor Seletor 

cor-um (n-1)’6 + 1 => 6n-6+1 => 6n-5. (primeira PA), 

cor-um (n-l)*6 + 2 => 6n-6+2 => 6n-4. (scgunda PA), 

cor-um (n-l)‘6 + 3 => 6n-6+3 => 6n-3. (terceira PA), 

cor-dois (n-l)*6 + -4 => 6n-6+4 => 6n-2. (primeira PA), 

cor-dois (n-l)*6 + 5 => 6n-6+5 => 6n-l. (scgunda PA), 

cor-dois (n-l)*6 + 6 => 6n-6+6 => 6n. (terceira PA). 

F. o script para o cfeito zebra trcs-tres: 

<script type="text/javascript"> 

$(document).ready(function() { 

$('table#horario tbody tr:nth-chi1d(6n-5)').addClass( , cor_um'); 

$('tab1e#horario tbody tr:nth-chi1d(6n-4)').addC1ass('cor_um'); 

$('table#horario tbody tr:nth-chi1d(6n-3)’).addC1ass('cor_um'); 

S('table#horario tbody tr:nth-child(6n-2)').addClass('cor_dois’); 

$('table#horario tbody tr:nth-child(6n-l)').addClass('cor_dois’); 

$('table#horario tbody tr:nth-child(6n)').addClass('cor_dois'); 

}); 

</script> 

Uma outra solu^ao para obter esse efeito laz uso dos metodos prev() e nextO 
para selecionar linhas antes e depois da linha selecionada, con forme se mencio- 
nou anteriormente. 

Observe que as linhas 2, 8 e 14 sao as linhas centrais dc cada grupo de tres 
linhas que tern a cor de fundo de fin id a pela classe cor-um. O seletor que adiciona 
a classe nessas linhas centrais c: 

S('table#horario tbody tr:nth-child(6n-4)').addClass('cor_um'); 

Dc modo semelhante, para as linhas centrais que tern a cor de fundo definida 
pela classe cor-dois, o seletor c: 

$('table#horario tbody tr:nth-chi1d(6n-l)').addClass('cor_dois'); 

Tendo adicionado a classe correspondente a linha central de cada grupamento 
de tres linhas, o seletor para a linha anterior e: 

$('tab1e#horario tbody tr:nth-child(6n-4)’)-prev0.addClass('cor_uiri'); 

S('table#horario tbody tr:nth-chi1d(6n-l)').prev().addClass('cor_dois'); 

E o seletor para a linha posterior e: 

S('table#horario tbody tr:nth-child(6n-4)')-next().addClass('cor_um’); 

$('tab!e#horario tbody tr:nth-child(6n-l)').next().addClass('cor_dois'); 
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Use a tabcla desenvolvida no arquivo-10.4b.html (Figura 10.4) para obtcr esse 
efeito. O script e mostrado a seguir: 


1 . 

2 . 

3. 

4. 

5. 

6 . 

7. 

8 . 

9. 

10 . 
11 . 
12 . 

13. 

14. 


<script type="text/javascript"> 

$(document).ready(function() { 

S('table#horario tbody tr:odd').addClass('impar'); 
S('table#horario tbody trreven^.addClassCpar'); 

S('table#horario tbody tr').hover( 
functionO { 

S(this).addClass(’destacar'); 

}, 

functionO { 

S(this).reaoveClass('destacar'); 

} 

); 

}); 

</script> 



[arquivo-10.5a.html] 


Codigo comentado: 


Linha(s) 

Linhas 3 c 4 
Linha 5 
Linhas 6 a 8 

Linha 7 

Linhas 9 e 11 

Linha 10 

Linha 12 


Descri^ao 

Efeito zebra cstudado antcriormcntc. 

Arrelando o efeito hover() a cada lima das celulas da tabela. 

Fungao a serexecutada quando o ponteiro do mouse for passado 
sobre a linha. 

Adiciona a classc destacar a linha que rccebeu o ponteiro do 
mouse. 

Fungao a serexecutada quando o ponteiro do mouse abandonar 
a linha. 

Remove a classe destacar da linha da qual o ponteiro do mouse 
foi rctirado. 

Fim do metodo hover(). 


Destacar colunas 

Agora, voce cstudara uma tccnica para destacar as colunas da tabela. Informara 
ao usuario que e prcciso que ele clique uma determinada cclula dc cabegalho 
para destacar a coluna correspondente. 

Observe, na figura 10.9, o efeito final para destacar a coluna denominada Classe 
apos o usuario ter clicado a sua celula de cabegalho. 
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Figure 10.9 - Destacar coluna. 

Use a tabela desenvolvida no arquivo-10.4b.html (Figura 10.4) para exemplificar 
esse efeito. As regras de estilo para a classe destacar sao idenricas as adotadas no 
exemplo anterior. O script e mostrado a seguir: 

1. <script type="text/javascript"> 

2. S(document).ready(function() { 

3. S(’table#horario tbody tr:odd').addClass(’impar’); 

4. S('table#horario tbody tr:even').addC1ass('par'); 

5. $('table#horario tr#horizontal th’).not('th:first-child') 

6. .prepend(’<span>&dianis;&nbsp;</span>').css('cursor', 'pointer'); 

7. $('table#horario tr#horizontal th').each(function(i) { 

8. var n = i - 1; 

9. $(this).click(function() { 

10. $('td').removed ass('destacar'); 

11. $(this).parents('thead') 

12. .siblingsC tbody') 

13. .children('tr').each(function() { 

14. S(this).children('td:eq(' + n + ')').addClass('destacar'); 

15. }); 

16. }); 

17. }); 

18 . }); 

19. </script> 

♦ [arquivo-10.5b.html] 
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Linha(s) Descri^ao (cont.) 

Linha 14 Para cada linha da tabela, procura o elcmento-filho que scja uma 
celula dc dados td e selcciona aquela que se enconrra na posi^ao n. 
A variavel n foi definida na linha 8 do script e vale i-1. Acompanhe: 
o usuario clicou a coluna cujo cabe^alho e "Classe", i=3 (trata-se da 
quartacoluna da tabela) en=2 (i-1 ).Assim,para cada linha da tabela, 
o script selcciona a td de ordem 2 (valor do n), ou scja, a terceira 
cclula de dados da linha e a esta adiciona a classe para destacar. 
Como a intera^ao e por todas as linhas do corpo da tabela, todas as 
terceiras celulas de dados receberao a classe para destacar, criando o 
efeito de destaque em toda a coluna. Note que a primeira celula de 
cada linha e uma celula de cabe^alho th e nao uma celula de dados 
td. Se a primeira coluna nao fosse uma coluna de cabe^alhos e voce 
quisesse dcstaca-la como as demais, usaria a variavel i como indice, 
sem necessidade de criar a variavel n. 


Destacar linhas seletivamente 

Denomina-se efeito destacar linhas seletivamente aquele segundo em que o usu¬ 
ario clica uma celula da tabela e todas as linhas que contem o dado igual aquele 
da celula elicada sao dcstacadas. 

Primeiramente, informe o usuario de que ele devera passar o ponteiro do 
mouse sobre qualquer celula de dados. Essa a^ao fara aparecer uma dica (tooltip) 
informando ao usuario que se ele clicar a celula, as linhas que contiverem esse 
dado scrao dcstacadas. Esta primeira ctapa c aprcsentada na figura 10.10. 
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Figure 10.10 - Destacar linhas seletivamente. 


Material com direitos 












296 


jQuery ■ A Biblioteca do Programador JavaScript 


Continue usandoa tabela desenvolvida no arquivo-10.4b.html (Figura 10.4) para 
exemplificar esse efeito. As regras de estilo a acrescentar e o script para o efeito 
sao mostrados a seguir. 

► CSS: 

.destacar-um {/* estiliza a celula que acaba de receber o ponteiro do mouse */ 
background:#444; 
color:#fff; 
cursor:pointer; 

} 

.tooltip {/* estiliza a caixinha da dica */ 
width:180px; 
padding:2px 4px; 
margin-top:25px; 
border:lpx solid #000; 
color:#333; 
background:#bfe2d8; 
position:absolute; 

} 


► jQuery: 


1 . 

2 . 

3. 

4. 

5. 

6 . 

7. 

8 . 

9. 

10 . 
11 . 
12 . 

13. 

14. 

15 

16 

17. 

18. 

19. 

20 . 
21 . 
22 . 
23. 


<script type="text/javasc ript"> 

$(document).ready(function() { 

S('table#horario tbody triodd^-addClassCimpar'); 

$('table#horario tbody tr:even').addClass('par'); 

S('table#horario tr#horizontal th').each(function(i) { 
var n = i + 1; 

var nomeColuna = SCthis).textC); 

$('table#horario tbody tr td:nth-child(’ + n + ')’) 

.hover(function() { 

$(this).addClass('destacar-uB'); 
var textoCelula = S(this).text(); 

S('<div class="tooltip">Gique para destacar todas as linhas para<br /> 
<b> 1 + nomeColuna + + textoCelula + '</b></div>').prependTo(this); 

S(this).click( 
function() { 

S('table#horario tbody tr’).removedass('destacar'); 

S('.tooltip’).renove(); 

S('table#horario tbody tr:contains(' + textoCelula + ')') 

.addClass('destacar'); 

}); 

}, 

functionO { 

S(this).rei»oveClass('destacar-u«i'); 

SC. tool tip'). reitoveQ; 
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Linha(s) Descrgao (cont.) 

l.inhas 14 a 17 Tendoatingidoasituagaomostradanafigura 10.10,o usuario clica 

a celula e o script remove a classe destacar porventura existente 
cm qualquer celula. Isto vai funcionara partir do segundo clique 
para limpar uni destaque anterior e acrescentar novo destaque. 
Aseguir,o script removeo div .tooltip. 

Linha 18 Seleciona todas as linhas da tabela que contenham o texto igual 

ao da celula clicada (mesmo dado) e destaca a linha. Veja o efeito 
na figura 10.11. 

l.inhas 21 a 24 Fungao para remover o destaque e o tooltip quando o usuario 
retira o ponteiro do mouse da celula sem clica-la. 

Na figura 10.11, mostramos o efeito final do destaque seletivo apos o usuario 
ter clicado uma celula contendo a palavra “Executive)”. 


Figura 10.1 1 - Destaque seletivo, efeito final. 

O script cm questao apresenta urn defeito que precisa ser corrigido. Caso o 
usuario clique uma celula contendo um determinado dado e este conste tambeni 
de uma outra coluna que nao a coluna clicada, a respectiva linha sera destacada 
indevidamente. No caso em questao, isto fica betn evidente para as colunas que 
contem os horarios de saida e chegada dos onibus. Um exemplo pratico evidencia 
o defeito do script: considere que o usuario deseja destacar as linhas da tabela 
que contem chegadas de onibus as 23:00h. Clicando a celula da coluna Chega¬ 
da e linha Cagador, cujo conteudo e 23:00, deveriam ser destacadas as linhas 
Cagador e Xanxere, que contem chegadas de onibus as 23:00h. 
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Na figura 10.12, vcja o defeito do scripr nessa sirua^ao. 
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Figura 10.12 - Destaque seletivo, defeito do script. 

Note que a linha para a cidade de Itajai foi destacada indevidamente, pois o 
horario de chegada ali e 06:00h e nao 23:00h como se queria. O script nao esta 
considerando somente a coluna cuja celula foi clicada para aplicar o efeito, ao 
contrario, esta aplicando-o a qualquer celula da tabela que contenha o mesmo 
texto da celula clicada. Altere o script para corrigir isso. 

Comece localizando a linha do script mostrado anteriormente, que adiciona 
a classe destacar as linhas da tabela. De uma olhada no script anterior c rente 
identificar qual e o numero dessa linha. 

Linha 1<S e a resposta. Veja a seguir essa linha: 

18. $('table#horario tbody tr:contains(' + textoCelula + ')’).addClass('destacar'); 

Aqui o script procura todas as linhas da tabela que contenham um texto igual 
ao texto da celula clicada e destaca a linha. Aqui o scripr e falho porque devcria 
procurar nao por linhas que contenham o texto, mas por cclulas da coluna clicada 
que contenham o texto para posteriormente sclecionar as linhas de tais cclulas c 
destaca-las. Escreva novamente a linha 18, com a corre^ao proposta: 

18. $('table#horario tbody tr td:nth-child(' + n + '):contains(' + textoCelula + ')') 
.parents('tr').addClass('destacar'): 
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Note que sc criaram duas linhas de titulo para as cidadcs do nortc c sul, linhas 
estas marcadas com celula dc cabe^alho. O acrescimo na marca^ao da tabela, 
alem das alterafbes introduzidas nas linhas de dados, e mostrado a seguir. 

► HTML: 

<tbody> 

<tr class= M sub"> 

<th colspan="6">Cidades no NORTE do Estado de Santa Catarina</th> 

</tr> 

...linhas da tabela... 

<tr class="sub"> 

<th colspan="6">Cidades no SUL do Estado de Santa Catarina</th> 

</tr> 

...linhas da tabela... 

<tbody> 


Atribuiu-se uma classe para os novos cabe^alhos e acrescentaram-se as regras 
CSS mostradas a seguir: 

tr.sub {/* estiliza os dois novos cabe<;alhos com uma cor de fundo e de texto */ 
background:#bfe2d8; 
color:#036; 

} 

img.maismenos {/* para as imagens dos sinais de mais e menos nos cabe<;alhos */ 
border:none; /* retira a borda-padrao para imagens que sao links */ 
margin-right:lOpx; /* afasta a imagem do texto do cabe<;alho */ 
vertical-align:middle; /* centra a imagem verticalmente com o texto */ 

} 

Note, na figura 10.13, que ao lado dos dois novos cabe^alhos ha o sinal de 
menos (-) indicando o link para fechar. Esse sinal e uma imagem ali posicionada 
com o uso do script para nao aparecer quando JavaScript estiver desabilitado 
no navegador. 

Observe o script para o efeito proposto: 

1. <script type="text/javascript"> 

2. S(document).ready(function() { 

3. var mais = '<a href="#"> 

4. <img src="mais.gif" alt="Revelar/ocultar cidades" class="maismenos" /> 

5. </a>' 

6. S('table#horario tbody tr:not(.sub):even').addClass(’impar'); 

7. $('table#horario tbody tr:notC.sub)’).hide(); 

8. S('.sub th').css({borderBottom:'lpx solid #333'}).prepend(mais); 

9. $(*img’, $('.sub th’)) 
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10 . 

11 . 

12 . 

13. 

14. 


15. 


16. 


17. 

18. 

19. 

20 . 


21 . 

22 . 


.click(function(event) { 
event.preventDefault(); 

if (($(this).attr('src')) == 'nienos.gif’) { 
$(this).attr('src', 'mais.gif') 
.parentsO 

.siblings(’tr').hide(); 

} else { 

$(this).attr('src', 'menos.gif') 
.parentsO. siblings('tr’).show(); 

}; 

}); 

}); 

</script> 


♦] [arquivo-10.6a.html] 


Codigo comentndo: 


Linha(s) 

Lin has 3 a 5 


I.inha 6 


Linha 7 


Linha 8 

Linha 9 
Linha 10 
Linha 11 


Descri^ao 

Cria uma variavel com nome mais e armazena nela a marcagao 
1 ITMLpara urn link mortoem uma imagctn dc um sinal dc mais 
(+) contida no arquivo mais.gif. Coloca ainda o atributo alt na 
imagem e a classc maismenos para fins dc cstilizagao. 

Adiciona a classe para ohtcr oefciro zebra na tabela. Aqui convent 
notar c|ue se usou a pseudoclasse :not(), para excluir do efeito 
zebra a linha dos dois novos cabegalhos na tabela. Isto garante 
que a linha logo abaixo da linha de cabegalhc tenha sempre a 
mesma estilizagao (a mesma cor de fundo do efeito zebra). 

Esconde todas as linhas da tabela que nao sejatn cabegalhos. £ 
erro comum csconder com o uso da declaragao CSS display:none 
e, postcriormente, revelar com o uso dc script. Nao cometa esse 
erro, pois voce tornara sua pagina inacessivel caso o navegador 
nao ofcrega suporre para JavaScript. Sc voce prctende esconder 
conteudos, comcce com estes a rnostra e esconda-os com o uso 
de script. 

Adiciona uma borda inferior solida a linha decabegalho ecoloca 
na respectiva celula a imagem do sinal de mais (+) como um 
link. 

Seleciona a imagem contida na celula de cabegalho (inscrida na 
linha 8). 

Define que uma fungao devera ser executada caso haja um clique 
da imagem do sinal de mais (+). 

Impede que ao receber um clique o link morto seja seguido. Caso 
contrario, a pagina “pula” para o topo. 


Material com direitos autorais 



Material com direitos autorais 



Material com direitos autorais 



Capitulo 10 ■ Efeitos em tabelas 


305 


Ourro aperfcigoamcnto quc sc podcria introduzir no script c o fornccimcnto 
de um link contendo o texto “Abrir todas” que, ao ser clicado, revelaria toda a 
tabela ao tnestno tempo em que o texto mudaria para “Fechar todas” e que,ao ser 
clicado, obviamente, fecharia a tabela com o texto do link mudando para “Abrir 
todas”. A esta altura, seu aprendizado com certeza ja chegou a um ponto que o 
capacita a desenvolver esse script. Assim fica como sugestao o desenvolvimento 
do script para voce testar seu conhecimenta 

Advertencia 

Como voce constatou nos exemplos para revelar c esconder conteudos de uma 
tabela, utilizaram-se os metodos hide() e show() para os efeitos. Examinando o 
funcionamento dos arquivos de exemplos. talvez voce seja tentado a melhorar 
o script com o uso de slideUpO, slideDownO, fadeOutO, fadeln(), animateO ou mesmo 
hide(velocidade), show(velocidade). 

Infelizmcnte, tais metodos nao sao interpretados de modo correto por todos 
os navegadores, quando se trata de tabelas, e usa-los, nestes casos, podera causar 
efeitos estranhos e indesejados. Portanto, use somente os metodos hide() e show() 
para esse efeito quando se trata de aplica-lo em tabelas. Observe, na figura 10.15, 
um desses efeitos estranhos referidos. 



^Livro jQuery do Mdujor | Id be las Mozilld Fircfox 




^qutvo Esfctf tllStOfKO F«S»R04 A)jd9 


ip Alta - Horanos 


S.tKld 1 CIi«m).»<|.i | CI.I559 | T.11 tf.i | Fiegileinbi 




ho NORTE «k> Eslmlo de S.iiu.i C.ttaimo 


6ms»rio j 06 45 | H 30 1 Convcncior 


JoiiivBle • 12 30 I 21:00 • Conventional 1 R8100.00 Sdbado 


R>150,00 j Diarta 


CanoMns 


Leilo ! a:t250,d0j SSbado 


Rio 


23 00 | Execubvo j KJ210.00 


Malr* 108 00116 001 ConventionalI R585.00 It Sria 


R Cki.i<lesiioSi'| .1 r i i |.» <!<■ 


Vaiida pare o peiiodo de 02HQ/200C a 30/1 1/ 2008 


Figura 10.15 - slideDown() no Firefox. 


Material com direitos autorai 






















306 


jQuery ■ A Biblioteca do Programador JavaScript 


Usar slideDownO e slideUpO causa uma revel a ^ao do contciido,como a mosrrada 
na figura 10.5, quando visualizada no navegador Firefox. Para o navegador IE (In¬ 
ternet Explorer), o comportamento se passa como para hideO e show() normalmente, 
exceto se usar velocidade. Nesse caso, embora o comportamento continue como 
para hide() e show(), a troca da imagem do sinal respeita a velocidade. 

Utilizar fadeOutO e fadeln() com ou sem velocidade funciona no Firefox, mas 
falha no IE. 

Enfim, fa^a algumas experiences e constate as diferen^as para chegar a seguinte 
conclusao: use somente hide() e show() para esse efeito ate que as inconsistencias 
sejam rcsolvidas. 
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CAPITULO 11 

Efeitos em formularios 


Neste capitulo, scrao abordados alguns efeitos da bibliotcca jQucry para emprego 
em formularios. necessario extremo cuidado ao se projetar scripts rodando 
no lado do clicntc, como sao os scripts jQucry, quando se trata dc adicionar 
funcionalidades a formularios. Ao contrario da maioria dos conteudos de uma 
pagina web, formularios destinam-se a possibilitar coleta de dados do usuario 
c envio deles ao servidor. 


11.1 Valida^ao de formularios 

Dados entrados pelo usuario em campos de um formulario devem ser verificados 
antes de ser enviados ao servidor. A verificagao se faz nao somente para evitar 
entrada de codigo malicioso no servidor, via formulario, mas tambem para nao 
permitir entrada de dados com formato diferente daquele para os quais o script 
de processamento no servidor foi descnvolvido. Por exemplo: se um campo devc 
receber um numero, verifique se o usuario entrou um numero nesse campo antes 
de cnvia-lo ao servidor. 

Assim, esteja consciente de que validar dados de formularios com o uso de 
JavaScript e uma tecnica que nao oferece seguran^a, apesar de ser adotada na 
maioria dos formularios existentes na web. Nao abra mao de scripts rodando 
no lado do servidor para validar seus formularios. Feita a ressalva, veja alguns 
efeitos jQuery para formularios. 


11.2 Placeholder para campos 

Placeholder e um texto-padrao inserido em um campo de formulario fornecendo 
uma indica^ao generica do formato dc dado esperado no campo. Em gcral, a fontc 
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do tcxto para o placeholder c estilizada cm uma cor mais dara que a prevista para 
a fonte do texto entrado pelo usuario. Em urn campode formulario contcndo um 
placeholder, tao logo o usuario entre no campo com o objetivo de preenche-lo, o 
texto do placeholder e automaticamente rctirado. 

No primeiro efeito a estudar, voce ira usar um campo de texto destinado a 
busca, ou simplesmente um campo de busca. O objetivo sera retirar o rotulo do 
campo da sua posigao e inseri-lo como placeholder. 

A marcagao HTML e mostrada a seguir: 

<form action="" method="get" id="formulario"> 
clabel for="busca">Busca</label> 

<input name="busca" type="text" id="busca'' /> 

</form> 

Na figura 11.1, mostramos a renderizagao da pagina antes e depois da apli- 
cagao do efeito. Utilizou-se uma so tela para mostrar as duas situagoes, com a 
finalidade de simplificar. 


' )Llvro (Query do Moujor | Formuldriot Morilld Flrefox 
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Figure 11.1- Campo de busca com rotulo como placeholder. 

O rotulo do campo de busca e o texto inserido na marcagao dentro do ele- 
mento label. Todo campo de formulario deve associar-se a um rotulo que tern 
por finalidade cumprir criterios de acessibilidade. 

Observe o script para obter o efeito: 

1. <script type=”text/javascript"> 

2. S(docuinent).ready(function() { 

3. var textoDefault = $('#formulan'o label')-remove().text(); 

4. S('#busca').val(textoDefault) .css('color', ’#999') 

5. .focus(function() { 

6. if ($(this).val() == textoDefault) { 

7. $(this).css('color', 'O.vaK"); 

8 . } 

9. }).blur(function() { 

10. if ($(this).val() ==''){ 
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11. $(this).val(textoDefault).css('color', '#999'); 

12 . } 

13. }); 

14. }); 

15. </script> 



[arquivo-11.2a.html] 


Codigo comentado: 


Linha(s) 
Linha 3 


Linha 4 


Linha 5 
Linha 6 

Linha 7 

Linha 9 
Linha 10 

Linha 11 


Descriqao 

Armazenou-se em uina variavel o rotulo do campo e, com o uso 
do metodo remove(), retirou-se o rotulo da marcagao. E importante 
notar que o metodo removeO retira o elemento do DOM, mas per- 
mite acessar seus conteudos normalmente. Ao contrario, o metodo 
empty() retira os conteudos do elemento e conserva o elemento no 
DOM. Este e um conceito importante que diferencia urn metodo 
do outro c sc voce nao estivcr atcnto a diferenga, podera cmpregar 
um ou outro de forma cquivocada c nao entcndcr o porquc dc seu 
script nao funcionar. Caso utilizasse empty(), o script falharia. 

Acessa o campo de busca e a este atribui um valor igual ao texto do 
rotulo, armazenadoanteriormente na variavel textoDefault.Aseguir, 
cria uma declaragao CSS para o texto, definindo para ele uma cor 
cinza-claro. O metodo val() manipula o atributo 1ITML value. De- 
clarar val(’valor') equivale a escrever na marcagao value="valor". 

Define-se uma fungao a scr cxccutada quando o campo dc busca 
reccbc o foco. 

Testa o valor do campo de busca contra o textoDefault. No carrega- 
mento da pagina, o teste resulta verdadeiro, pois at) campo de busca 
se atribuiu o textoDefault con forme definido na linha 4. 

Tendo recebido o foco e a condigao sendo verdadeira, remove-se a 
regra CSS para o texto no campo, bem como o proprio texto, deixando 
o campo limpo para receber a entrada de dado do usuario. 

Aqui, define-se uma fungao a ser cxccutada quando o foco e retirado 
do campo. 

Testa para saber o que aconteceu com o campo apos ter recebido 
o foco. Duas sao as possibilidades: o usuario preencheu e saiu ou 
deixou em branco e saiu. 

Se deixou em branco e saiu, repoe o textoDefault no campo. Caso 
contrario, deixa o campo com o dado prcenchido para posterior 
validagao. 


Outra solugao comum nesses casos consistc em usar como placeholder um 
texto que nao o rotulo do campo, mantendo este no seu local original, tal como 
mostra a figura 11.2. 
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Figure 11.2 - Campo de busca com tftulo como placeholder. 

Note que o rdtulo permanece cm seu lugar e o texto “palavra chave” foi usado 
como placeholder. 

Entre as varias solu^oes possiveis, selecionaram-se duas apresentadas a seguir. 


Primeira solu^ao 

Inserir o atributo title no elemento label da marca^ao e usar o valor desse atri- 
buto como placeholder. Observe o acrescimo na marcagao HTML e a altera^ao 
na linha 3 do script anterior. 

• HTML: 

clabel for="busca" title="palavra chave">Busca</label> 

• jQuery: 

var textoDefault = $(*#formulario label').attr('title'); 



[arquivo-11.2b.html] 


Codigo comentado: 

Linha Descriqao 

Linha 3 Nesta solugao, utilizou-se o metodo attr(’title') para acessar o valor 
do atributo title do elemento label e atribui-lo a variavel textoDefault. 
Todo o restante do script permanece como na solugao anterior. 


Segunda solu^ao 

A segunda solugao consiste cm nao introduzir altera^ao na marca^ao, criando 
o texto do placeholder via script. Nesse caso, bastaria alterar a linha 3 conforme 
mostrado a seguir. 

var textoDefault = 'palavra chave'; 
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4. 

5. 

6 . 

7. 

8 . 

9. 

10 . 
11 . 
12 . 

13. 

14. 

15. 

16. 

« 


.css({display:'none', 

border:'lpx solid #add6ef', 
padding:'2px 4px', 
background:'#d6e2e5', 
marginLeft:'10px' 

}); 

$('.dica').focus(function() { 
S(this).next().fadeln(lSOO); 

}).blur(function() { 

S(this).next().fadeOut(1500); 

}); 


}); 

</script> 

[arquivo-11.3a.html] 


Codigo comentado: 


Linha(s) 


Descri^ao 


Linha 3 Utilizou-se o seletor do lipo E + F para selecionar os elementos span 

imcdiatamenteapos o elemento com a classe dica. Veja na marca<,ao 
quc siio os elementos span que contcm o texto da dica. Seletores do 
tipo E + F casam com o elemento F quc vem imediatamentc apos 
uni elemento E. 

Linhas 4 a 9 Regras CSS destinadas a estilizar a caixa contendo a dica e a escon- 
de-la quando a pagina for carregada. Lembre-se de que um impulso 
inicial pode levar o desenvolvedor a definir essas regras de estilo 
na folha de estilos da pagina. Voce pode adotar essa solu^ao sem 
problemas, desde que conserve a declara^ao display:none no script, 
nao a transferindo para as CSS da pagina, pois assim fazendo, voce 
bloqueia o acesso as dicas quando JavaScript nao estiver dispomvel 
no navegador. 

Linha 10 Define uma fumjao a ser executada quando o campo recebc o 
foco. 

Linha 11 Revela a dica que estava oculta usando o efeito fadeln(). 

Linha 12 Define uma fun^ao a ser executada quando o campo perde o foco. 

Linha 13 Esconde a dica usando o efeito fadeOut(). 


11.4 Desabilitar campos 

Para exemplificar o efeito de desabilitar campos de um formulario, tome como 
base um formulario composto de tres areas distintas,cada uma delas destinadas 
a um fabricante de automovel, selecionavel por um campo de formulario do tipo 
botao radio (radio). Para cada fabricante e apresentada uma serie de campos de 
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formulario do tipo caixa dc sclc^ao (checkbox) quc pcrmitc ao usuario cscolhcr 
varios modclos dc automovel do fabricante selecionado. A marca^ao HTML 
(omitiram-se alguns checkboxes para reduzir o tamanho do codigo) e mostrada 
a seguir: 

<form action="" method="get" id="formulario M > 

<fieldset> 

<legend>Selecione utn fabricante e escolha os modelos de sua preferencia.</legend> 
<div class="mudar"> 

<label class="fabricante"xinput type="radio" name="fabricante" /> 

Mercedes Benz</label> 

clabelxinput type="checkbox" />Classe A - Hacthback</label> 

<labelxinput type="checkbox" />Classe B - MPV</label> 

...mais checkbox... 

</div> 

<div dass="mudar"> 

<label class="fabricante"xinput type="radio" name="fabricante" />Ferrari</1abel> 
clabelxinput type="checkbox" />599 CTB</label> 
clabelxinput type="checkbox M />California 2009</1abel> 

...mais checkbox... 

</div> 

<div class="mudar"> 

<label dass="fabricante"xinput type="radio" name="fabricante" />Volvo</label> 
<labe1xinput type="checkbox" />S40c/label> 
dabelxinput type="checkbox" />S60</label> 

...mais checkbox... 

</div> 

</fieldset> 

</form> 

Note que rotulos (label) imph'citos foram declarados para os campos do 
formulario. Isto possibilitou que ao se declarar floatdeft para os elementos label, 
cstes carregassem consigo scus elementos input respcctivos, facilitando o posi- 
cionamento c alinhamento dos campos do formulario. As demais regras CSS 
sao triviais. 

« Diz-se que umrotulo de formulario6 implicitoquandoo elemento label, alem 

de conter o texto descritivo do campo, e tambem seu container. Rotutos nao 
implicitos contem somente o texto descritivo e devem ser marcados com o 
atributo for com nome igual ao nome do atributo id do campo. 


Com a finalidade de posicionar e melhorar a apresenta^ao do formulario em 
questao, criou-se a folha de estilos mostrada a seguir: 

body {width:600px; font:80V1.2 Arial, Helvetica, sans-serif; margin:30px auto; 

color:#666; padding:0;} 
label {width: 190px; display:block;float:left;} 
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fieldset {border:lpx solid #ccc; padding:lOpx;} 

legend {font-weight:bold; border:lpx solid *ccc; padding:lpx 4px;} 

label.fabricante {font-weight:bold; margin:0;} 

form div {margin: 15px 0 0 0;} 

.mudar, .fabricante {width:100%;overflow:auto;} 

.mudar {background:#d6e2e5;} 

.fabricante {background:#add6ef;padding:10px 0;} 



[arquivo-11.4a.html] 


Observe, na figura 11.4, a renderizagao do formulario proposta 



Figura 11.4 - Formulario basico proposto. 

O formulario foi projetado para permitir a sele^ao de um fabricante apenas 
e varies modelos. Na figura 11.4, voce pode notar que houve selegao de um fabri¬ 
cante e de modelos dos tres fabricantes. 

Nao serao tecidas considerafoes sobre tecnicas ou validates para evitar uma 
selegao ilegal como a mostrada, pois o objetivo e cstudar a tecnica de desabilitar 
campos de formulario. Contudo, vale lembrar c|uc esta e uma solugao que nao 
deve estar isolada, pois caso JavaScript esteja indispomvel no navegador, o script 
falhara. E recomcndavcl que seja usada como alternativa simplificada para outro 
mccanismo, para desabilitar os campos. 

Observe o script para obter o efeito de desabilitar os campos do formulario 
para as op^oes de fabricante nao escolhidas: 
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<script type="text/javasc ript"> 

S(document).ready(function() { 

$(’#formu1ario input:checkbox').attr('disabled', ’disabled’); 
$('#forirulario input:radio').click(function() { 

S('#fonnulario input:checkbox’).removeAttr('checked') 

.removeAtt r('disabled'); 

$(this).parents('.mudar’).siblingsC.mudar') 

.findC* :checkbox') 

.attr('disabled’, ’disabled'); 

}); 

}); 

</script> 

[arquivo-11.4b.html] 

Codigo comentado: 

Linha(s) Descri^ao 

Linha 3 Inicia-scdesabilitandoiodososcheckboxes,paraevitar que o usuario 

escolha os mod el os sem rer escolhido um fabricante. Note o uso da 
pseudoclasse checkbox no seletor. 

Linha 4 Define-se uma funyao a ser executada quando o usuario clica um 
dos botoes radio para a escolha do fabricante. Note o uso da pseu¬ 
doclasse :radio no seletor. 

Linha 5 Esta linha content uma agao a ser executada somente no caso de 
o usuario ter escolhido um fabricante, selecionado os modelos e 
resolvido alterar a escolha do fabricante. Por que alguem faria isso? 
Realmente, nao faz muito sentido, mas ao projetar formularios, 
procure simular qualquer situagao de preenchimento e interagao 
do usuario, por mais absurda que parc\*a. Ocorrendo tal situa^ao, o 
script precisa limpar as selegdes feitas antes de desabilitar as esco- 
lhas. £ essa a ayao contida nesta linha: seleciona todos os checkboxes, 
limpa os selecionados e habilita-os para nova escolha. 

Linha 6 Encontra todos os elementos div.mudar, que sao o elemento-pai dos 

conteudos dos blocos de fabricantes que (no nosso caso sao dois) 
nao sejam o fabricante selecionado pelo usuario. 

Linha 7 Encontra todos os checkboxes que nao sejam os do fabricante .sele¬ 
cionado pelo usuario. 

Linha 8 Dcsabilita os checkboxes encontrados. 

Observe, na figura 11.5, o efeito final com a escolha de um fabricante, alguns 
modelos e os modelos dos demais fabricantes desabilitados. Note que a escolha 
de um fabricante desabilita a escolha dos modelos dos demais, mas nao desabilita 
a escolha do fabricante, possibilitando ao usuario mudar de op^ao. 


1 . 

2 . 

3. 

4. 

5. 

6 . 

7. 

8 . 

9. 

10 . 
11 . 
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Figure 11.5 - Formuldrio com efeito desobilitar. 

Agora nao c mais possivel uma selc^ao invalida como aquela mostrada na 
figura 11.4. 


11.5 Revelar campos 

Para esta solu^ao, a proposta e ap resent a r, inicialmente, ao usuario somente a 
opyao de escolha do fabricante. Feita a opgao, os checkboxes para a escolha dos 
modelos serao revelados. 


A seguir, o script para obter o efeito proposto: 

1. <script type="text/javascript"> 

2. S(document).ready(function() { 

3. S(':checkbox').parents('label').hide(); 

4. $(':radio').wrap('<a href="#"x/a>’); 

5. $(':radio').parents('label').click(function() { 

6. $(this).siblings().fadeln(1500); 

7. S(this).parent().siblings('.mudar') 

8. .children('label:not(.fabricante)') 

9. .slideUpO.find(':checked').each(function() { 

10. S(this).removeAttr('checked'); 

11- }); 

12 . }); 

13. }); 

14. </script> 

■ft [arquivo-11.5a.html] 


Material com direitos autorai 




Capitulo 11 ■ Efeitos em formularios 


317 


Codigo comcntado: 

Linha(s) Descriijao 

Linha 3 Encontra todos os elementos label que sejarn clemcntos-pai dc 
checkbox c escondc-os. Por sc ter usado rotulo implfcito, nao so os 
rondos, mas tambem os elementos input a estes associados scrao 
cscondidos. 

Linha 4 Colocou-se como container para os elementos radio um link morto. 

Voce saberia explicar a razao desse link? Se pensou em navega^ao 
por teclado, acertou. Sem um link, o usuario navegando com auxf- 
lio do teclado nao conseguiria abrir as opffies de modelos de um 
fabricante. 

Linha 5 Dcfiniu-se uma fun^ao a ser executada quando o usuario escolhe 
um fabricante. Outra vez o uso de rotulo implfcito facilita o script. 
Clicar o botao deescolha ou o nome do fabricante, indiferentemente, 
dispara a execu^ao da fun^ao. 

Linha 6 Seleciona os elementos-irmao do elemento label clicado e revela-os. 

Linha 7 Encontra o elemento-pai do elemento label clicado. £ um div com 
a classe mudar, a seguir encontra seus elementos-irmao com a classe 
mudar. S.ao os outros dois divs. 

Linha 8 Encontra os elementos-filho das dois divs que nao sejam os elementos 

radio de escolha dos fabricantes. Sao os checkboxes para a escolha 
dos modelos. 

Linha 9 Esconde o encontrado na linha anterior e procura por aqueles que 
tenham sido marcados pelo usuario. 

Linha 10 Faz um loop pelos marcados e desmarca-os. Estc procedimento e 
necessario nos casos em que o usuario faz uma escolha de modelos 
c resolve mudar o fabricante. £ preciso desmarcar os cscolhidos 
antes de fechar o que estava aberto para, em seguida, revelar a nova 
escolha. 

Na figura 11.6, constam a apresentayao inicial do formulario e a apresentagao 
apos ter sido leita a escolha de um fabricante. 
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Figure 11.6 - Formulario revelando compos. 


11.6 Elemento legend 

Veja, nesta se<;ao, uma tecnica que nao e exclusiva de formularios e pode ser 
aplicada a outros cenarios. 

Sabe-sequeos navegadores, para alguns elementos HT\lL,apresentam restri<;t>es 
e inconsistencias na renderizagao quando servidos com determinadas regras CSS. 
Os elementos caption para tabelas e legend para formularios se enquadram nessa 
catcgoria. Outros como select e option simplcsmentc ignorant ccrtas regras CSS. 

Nesses casos, a opgao e apresentar tais elementos com estilizagao minima e 
conseguir efeitos de apresentagao mais sofisticados com o uso de script. A tec¬ 
nica, para os elementos legend e caption cujos conteudos sao textuais, consiste cm 
substituir o elemento por um outro que aceite regras CSS sent restrigoes. 

Utilize neste exemplo oarquivo-11.5a.html desenvolvido na seyao anterior. Subs- 
titua o elemento legend por um elemento h4 (cabe^alho nivel quatro) ao qual se 
atribuira a classe legenda. Altere tambem a borda do elemento fieldset de solida 
para pontilhada. As regras CSS a acrescentar sao as seguintes: 
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11.7 Selecionartodos 

Urn cenario comum cm formularios e aquele no qual se apresenta ao usuario uma 
serie de campos de selegao, sendo permirida a selegao dc mais de uma opyao, cal 
como mostrado na sele^ao dos modelos de automoveis nos exemplos anteriores. 

H dc boa tecnica fornecer ao usuario uni mecanismo para selecionar c dcs- 
marcar todas as op^ocs de uma so vez. Para demonstrar o desenvolvimento e 
funcionamento do script que implementa essa t uncionalidade, utilize o formulario 
cuja marcagao HTMLe mostrada a seguir: 

<form action="" method="get" id="formulario"> 

<fieldset> 

<legend>Escolha os modelos de sua preferencia.</legend> 

<div class="mudar"> 

<label><input type="checkbox" />Classe A - Hacthback</label> 

<labelxinput type="checkbox" />Classe B - MPV</label> 

...mais checkboxes... 

<labelxinput type="checkbox" />P4/5</label> 

</div> 

</fieldset> 

</form> 

A rendcrizagao do formulario e mostrada na parte superior da figura 11.8. Na 
parte inferior, consta o formulario apds ter sido desenvolvido e incorporado na 
pagina, o script jQuery proposto nesta se^ao. 



Figura 1 1.8 - Formuldrio, selecionar todos. 
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O script para a funcionalidadc dc sclccionar todos e mostrado a seguir: 


1. $(docunient).ready(function() { 

2. var selecionaTodos = S('<labelxinput type="checkbox" class="todos" /><b> 

Selecionar todos</bx/labe1>'); 

3. S(se1ecionaTodos).insertBefore('.mudar') 

4. var todosCheckboxes = SC.mudar').find(':checkbox'); 

5. $('.todos').click(function() { 

6. if (this.checked) { 

7. $(this).next().text('Desmarcar todos') 

8. S(todosCheckboxes).attr('checked', 'checked'); 

9. } else { 

10. S(this).next().text('Selecionar todos’) 

11. S(todosCheckboxes).removeAttr(’checked'); 

12 . } 

13. }); 

14. S('<h4 class="legenda"x/h4>').insertAfter('legend'); 

15. 

16. }); 

17. </script> 



[arquivo-11.7a.html] 


Codigo comentado: 

Linha(s) Descri^ao 

Linha 2 Cria uma variavel e armazena a marca^ao HTML para o checkbox 
a ser inserido na pagina com a finalidade de fornecer a op^ao de 
selegao de todos os modelos. Como esta funcionalidade estara 
disponivel apenas em navegadores com JavaScript habilitado, nao 
se deve colocar o checkbox diretamente na marca^ao, e sim inseri-lo 
via script. 

Linha 3 Inscre o checkbox criado imediatamcnte antes do div container para 
as op^ocs dc modelos. Utilizou-sc insertBeforeO c nao prependToO 
porque neste caso a inser^ao seria dentro do div e o checkbox estaria 
sujeito as regras de estilo para os checkboxes de escolha dos modelos. 
Assim, iria se posicionar ao lado da primeira opgao de escolha e nao 
acima de todas elas como se desejava. Fa^a uma cdpia do arquivo, 
altere e comprove o comportamento com prependToO. 

Linha 4 Armazena em uma variavel todos os checkboxes para a escolha dos 
modelos. 

Linha 5 Define uma fungao a ser executada quando o usuario scleciona o 
checkbox que foi inserido para selecionar todas. 

Linha 6 Verifica se a sele^ao de todos os modelos esta marcada. Logo apos 
o primeiro clique do usuario, esta condifao c vcrdadcira e o script 
segue para a linha 7. 
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Note que sc acrescentou a marcagao HTML da pagina um hotao dc envio do 
formulario ao qual se atribuiu um id="enviar" e que, quando clicado, fara o script 
de valida^ao ser acionado. Nao ha inser^ao de JavaScript na marca^ao do hotao 
para acionar a execu^ao da fungao de valida^ao. 


O script para a funcionalidade de valida^ao e mostrado a seguir: 


1. $(document).ready(function() { 

2. $('#enviar’).click(function() { 

3. var i = $('.mudar input:checked').sizeO; 

4. if (i - 0 || i > 5) { 

5. alertC'Por favor, selecione no minimo um e no maximo cinco modelos'); 

6 . } 

7. }); 

8 . }); 

9. </script> 



[arquivo-11.7a.html] 


Codigo comentado: 

Linha(s) Descri^ao 

Linha 2 Define a fun^ao de valida^ao a ser executada quando o usuario clica 
o hotao “linviar". 

Linha 3 Usa o metodo sizeO para armazenar a quantidade de modelos de 
automovel selecionados pelo usuario. 

Linha 4 Testa a quantidade selecionada e insere na tela a caixa de alerta 
JavaScript se a condiyao for verdadeira. 
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CAPITULO 12 

Imagens 


Neste capitulo, scrao cstudadas as tecnicas de manipulayao dc imagens com o uso 
da biblioteca jQuery. Serao abordados alguns efeitos simples destinados a ampliar 
imagens c tambem a construyao dc galcrias dc imagens. O objetivo principal sera 
ampliar o conhecimento das tecnicas gerais de criayao jQuery. Existem varios 
plug-ins para manipulayao de imagens e desenvolvimento degaleriase slide-show 
de imagens. Ao termino deste capitulo, voce, alem de atingir o objetivo proposto, 
estara em condiyoes de desenvolver scripts simples para ampliayao de imagens e 
construyao dc galcrias de imagens com recursos razoaveis. Havendo necessidade 
de inserir em seu projeto uma galeria de imagens com recursos avanyados, con- 
suite o repositorio de plug-ins em http://plugins.jquery.coni/. 

12.1 Introdu^ao 

Inserir imagens em uma pagina web e um rccurso empregado na maioria dos 
sites. Imagem em paginas web, alem de transmitir informayao, torna a leitura 
da pagina mais agradavel. A internet foi inventada por Tim Berners-Lee com o 
proposito inicial de ser um meio de troca de informaydes entre cientistas. Os 
documentos de natureza cientifica, em geral, sao criados com o uso de texto puro, 
sem necessidade dc elaborados recursos de apresentayao. Na proposta inicial de 
Tim, nao estava prevista a inseryao de imagens nem de nenhum tipo de midia 
ou objeto nos documentos a transitar pela internet. 

A internet tornou-se uma rede popular e difundiu-se muito, gramas, em grande 
parte, a inven^ao dos elementos HTML para inseryao de midia, a comeyar pelo 
clemento para inserir imagens, com o conscqucnte aparecimento do primeiro 
navegador grafico, o Mosaic. A invenyao do Mosaic marcou o inicio do desen¬ 
volvimento da internet. 
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12.1.1 Imagens acessi'veis 

Quanto a sua finalidade, as imagens em um documento podem ser classificadas 
em dois grupos, conforme descritos a seguir. 

12. 7.7.7 Imagens decorativas 

Como o proprio nomc sugcre, sao aquclas dcstinadas a mclhorar o cfcito visual 
da pagina, nao tendo nenhuma influencia ou relagao com a transmissao da in¬ 
formagao. Se forem retiradas da pagina, nao causarao outro impacto que nao o 
de tornar mais limitada a apresentagao visual. Estas nao merecem atengao sob 
o porno de vista da acessibilidade e devem ser marcadas com o uso do atributo 
alt vazio, conforme mostrado a seguir: 

<img src*"cd.jpg" alt="" /> 


12.1.1.2 Imagens para transmits informagao 

Sao imagens criadas com a finalidade de complementar, esclareccr ou substituir 
um conteiido textual ou um conteiido que seja indispcnsavcl para o entendimcnto 
da informagao. O cxcmplo classico de uma imagem dessa natureza e aqucla criada 
para substituir os cabegalhos, em um documento, que devam ser apresentados 
com um tipo de fonte decorativa nao dispomvel na maquina dos usuarios. 

As Recomendagoes do W3C para acessibilidade preconizam que nesses casos 
se deve fornecer uma alternativa textual para a imagem, com a finalidade de nao 
bloquear acesso a informagao. Lembre-se de que usuarios que estejam navegando 
com um leitor de tela ou com imagens desabilitadas nao tomarao conhecimento 
do conteiido da imagem a menos que se fornega tal alternativa. 

Existem dois metodos basicos para se fornecer o equivalente textual para 
uma imagem que transmita informagao ou que seja indispensavel para o enten- 
dimento da informagao. 

Atributo alt 

Para imagens cujo equivalente textual seja um texto curto, sent nccessidadc de 
descrigao dctalhada, coloca-se o texto como valor do atributo alt, conforme o 
exemplo mostrado a seguir: 

<img src=”cd.jpg" alt="Capa do CD dos Beatles" /> 
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AtliblltO longdesc 

Para imagens que requerem como equivalente textual urn texto explicativo longo, 
usa-se o atributo longdesc (long description, que significa dcscri^ao longa), con- 
forme o exemplo mostrado a seguir: 

<img src="cd.jpg" alt="Capa do CD dos Beatles" longdesc="cd_beatles.html" /> 

O atributo longdesc aponta para um arquivo de texto onde se encontra a 
dcscrigao detalhada da imagem e c um suplcmento ao atributo alt, devendo ser 
usado com este. 


12.2 Amplia^ao de imagens 

Agora voce ira examinar algumas tecnicas de amplia^ao. E comum cm paginas 
web, com a finalidadc de nao poluir visualmente a pagina com inser^ao de imagens 
grandcs, fornecer uma versao miniatura da imagem, conhecida como thumbnail, 
que, ao ser clicada, fornece a visualiza^ao da imagem em seu tamanho natural. 

Em tais situates, o thumbnail e um link apontando para a versao ampliada 
da imagem. Sempre que se marcar uma imagem como link, os navegadores, por 
padrao, inserem uma borda,normalmente na corazul tipica da indica^ao de links, 
ao redor da imagem. A primeira providencia a se tomar e retirar essa indesejavel 
borda, declarando a seguinte regra CSS: 

img {border:none;} 

Ou usar um outro seletor mais especifico que tenha como alvo somente as 
imagens que sao link, como mostrado a seguir: 

a img {border:none;} 

Considcre a marca^ao HTML a seguir: 

<div id="galeria"> 

<a href="l.jpg"ximg src=”l.jpg" alt="Descrigao da foto" width="120" height="90" 
dass="foto" /></a> 

</div> 

<span>Clique para ampliar</span> 
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Trata-sc de um thumbnail inserido como link cm uma pagina, tcndo logo 
abaixo um texto com uma dica instruindo o usuario a clica-lo para visualizar a 
imagem ampliada. A imagem encontra-se no arquivo 1 . jpg, noseu tamanho natu¬ 
ral, e sera urilizada para obter o thumbnail for^ando a redu^ao de suas dimensoes 
com o usodosatributos width e height no elemento de marcagao img. Assirn sendo, 
nao sera necessario gerar duas imagens, uma para o thumbnail e outra em sen 
tamanho natural. Considere que nao sera preciso gerar um thumbnail persona- 
lizado, como aqueles constitufdos por uma por^ao da imagem ampliada. 

Note que se utilizou como container para a imagem um div com sua respectiva 
id denominada galena. Esse container e perfeitamente dispensavel, mas toi ali 
inserido tendo cm vista as proximas ctapas deste estudo nas quais se estcndcra 
essa marcagao c o container sera indispensavcl. 

Observe, na figura 12.1, a rendcriza^ao da marcagao proposta c o result ado 
quando o usuario clica o thumbnail. 




r ) l.ivro jQuery do Maujor | Imogens e galenas <)c fotos Mo/illa Firefox 


Arquivo EdAc* Exfcr Hlstorco Favorttos Ferramerrtas Ajuda 


Clique para ampriat 


klLsUtf 


O 1.jpg (imagem JPEG. 500x175 pixels) - Redimensionatla (81%) Mo/illa Firefox 


Atquivo Edftai Exfcr hist Oreo Favorites Ferramentas Ajuda 


Figuro 1 2.1 - Ampliagoo de imagem em pagina web sem script. 
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Ao clicar a imagem, o usuario obrcm a visualiza^ao da imagcm cm scu ta- 
manho natural. Note que a imagem ampliada loi apresentada na mesma janela 
ondc se encontrava o thumbnail, pois nao se usou o atriburo target no elemento 
link definindo abertura em uma nova janela. 

A proposito, documentos que utilizem uma DTD Strict nao sao validos se 
usarem o atributo target para links. Em documentos que admitem o uso dessc 
atributo, sempre que um link abrir outra janela, informe, junto ao link, esse 
comportamento. 

Primeira etapa 

Em uma primeira etapa, voce ira estudar um script simples para obter a amplia- 
<^ao da imagem. Complementarmente, com a finalidade de mostrar uma tecnica 
de manipulate de textos existentes em paginas, sera alterada a maneira de 
apresenta^ao da dica para clicar a imagem. 

Na figura 12.2 mostramos o cfeito final com a dica posicionada sobre a imagem. 



Figure 12.2 - Ampliogao de imagem em pdgina web com o uso de script. 
Observe as regras de estilo e o script para obter o efeito. 
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► CSS: 

<style type="text/css" media=”all">.foto {border:none;} 

#galeria {width:500px; position:relative;} 

.abre-fecha {/* esta dasse foi inserida pelo script no elemento span que marca a 
dica ao usuario */ 
position:absolute; 
background:#add6ef; 

1 eft:0; 
top:0; 

text-align:center; 

font-size:llpx; 

cursor:pointer; 

} 

</style> 


► jQuery: 


1 . 

2 . 

3. 

4. 


5. 


6 . 

7. 

8 . 

9. 


10 . 

11 . 

12 . 

13. 

14. 


15. 

16. 

17. 

18. 


19. 


<script type="text/javascript”> 
S(docuinent).ready(function() { 

var af = S('#galeria + span').addClass('abre-fecha') 
,css({opacity:0.6, width:120>); 
$('#galeria').prepend(af) 

.dick(function(event) { 
event.preventDefaultO; 
if (${'.foto').attr('width') > 120) { 

S(’.foto').attr({width:120, height:90}); 

$('.abre-fecha’).text('Clique para ampliar') 
.css({width:$('•foto’).attr('width')}); 

} else { 

$(’.foto').attr({width:500, height:375}); 

$('.abre-fecha').text('Clique para fechar') 
.css({width:SC.foto').attr('width')}); 

}; 

}); 

}); 

</script> 



[arquivo-12.2a.html] 


Codigo comcntado: 

Linha(s) Oescri^ao 

Linhas 3 e 4 Armazcnou-se cm uma variavel urn ohjcto jQuery quc c dcscrito 

assim: seleciona-se o elemento span que se segue ao di v#gal eri a (e 
o elemento da marcafio que content a dica ao usuario - Clique 
para ampliar - e a ele se atribui uma classe denominada abre- 
fecha) (veja regras de estilo) e, a seguir, define-se, para a dica, 
uma opacidade e uma largura igual a largura do thumbnail. 
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Linha(s) 
Linha 5 

Linha 6 

Linha 7 

Linha 8 


Linha 9 

Linha 10 
Linha 11 
Linha 13 


Linha 14 
Linha 15 


Descri^ao (cont.) 

Inserc-se denrro e no im'cio - prependC) - do div#galeria a dica, 
conforme modificada anrcriormcnte. 

Dcfine-se uma fun(ao para ser executada quando o usuario dica 
o div#galeria. 

Impede que o clique na imagem cause a abertura de uma janela 
com a imagem ampliada. Equivale a return false. 

Testa o tamanhoda foto na tela.verificando sesua largura e maior 
que a do thumbnail (120px, no caso do exemplo em questao). 
Quando a pagina for carregada, a condi^ao sera falsa, pois nessa 
ocasiao se apresenta o thumbnail. O script vai para a linha 12. 
Suponha que o usuario ja ampliou a imagem e clicou-a para 
reverter ao estado inicial, mostrando novamente o thumbnail. 
Nesta situagao, a condigao de teste e verdadeira e voce deve 
seguir com a linha 9. Caso se confunda no acompanhamento 
do funcionamento do script, leia a partir da linha 13 e depois 
volte para a linha 9. 

Como a imagem apresentada e a ampliada, insere-se o atributo 
width para restabelecer a largura do thumbnail. 

Altera-se o texto da dica. 

Define-se o texto da dica com largura igual a do thumbnail. 

Aquicomc^ao funcionamento do script quando ousudrioclicao 
thumbnail para amplia-lo.Inscrcosatriburosdcfinindoa largura 
e a altura da imagem ampliada. 

Altera o texto da dica. 

Define o elemento span, que content a dica, com uma largura 
igual a da imagem ampliada. 


Segunda etapa 

Como voce deve ter observado, o script desenvolvido na etapa anterior causa a 
ampliagao e fechamento da imagem de forma abrupta. Nesta segunda etapa, voce 
ira usar o metodo animateO para melhorar essas transi^oes. Observe os acrescimos 
introduzidos no script anterior: 

1. <script type="text/javascript"> 

2. S(docuinent).ready(function() { 

3. var af = S(’#galeria + span').addClass('abre-fecha') 

4. .css({opacity:0.6, width:120}); 

5. $('#galeria’).prepend(af) 

6. ,click(function(event) { 

7. event.preventDefaultO; 

8. $('.abre-fecha').hide(); 

9. if ($('.foto')-attr('width') > 120) { 
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Codigo comentado: 

Linha(s) Descri^ao 

Linhas 11 c 20 Acresccnta-sc a mudanga dc opacidadc para 20% durante a 
animagao para ampliar c reduzir. Isto significa que ao final de 
cada animagao, a imagem estara com sua opacidadc reduzida 
para esse valor. 

Linhas 12 e 21 Ao final da animagao de ampliagao e redugao, executa-se uma 
iungao que restabelece a opacidade da imagem com velocidade 
igual a 1 segundo. 

Quarts etapa 

Considcre que a animagao obtida na etapa anterior satisfaz scus propositos e, 
nesta etapa, voce focara outro aspccto da ampliagao da imagem. Note que sc 
urilizou uma imagem gravada com as dimensoes de 500 x 375px e, a parrir dcla, 
construiu-se um thumbnail com o uso dos atributos width c height no elemento 
img constantc da marcagao. Isto tirou flexibilidade do script, pois se cm outro 
local do site voce precisar usar um thumbnail e/ou imagem ampliada com outras 
dimensoes, tera de reescrever a marcagao e o script. 

Nesta solugao, torne o script reutilizavel, possibilitando a personalizagao das 
dimensoes das imagens. Note que em navegadores sem suporte para JavaScript, 
nao ha escolha para variar as dimensoes a nao ser alterar a marcagao e/ou as 
dimensoes da imagem original. 

No seu script, crie variaveis para armazenar as dimensoes. Com isso, basta 
mudar o valor das variaveis de acordo com a neccssidade. As alteragoes no script 
anterior sao mostradas a seguir: 

1. <script type="text/javascript"> 

2. S(document).ready(function() { 

3. var larguraFoto = 800; var alturaFoto = 600; 

4. var larguraMini = 200; var alturaMini = 150; 

5. SC.foto').attr({width:larguraMini, height:alturaMini}); 
var af = S('#galeria + span').addClassCabre-fecha') 

.css({opacity:0.6, width:larguraMini}); 

5. S('#galeria').prepend(af) 

6. .click(function(event) { 

7. event.preventDefault(); 

8. $('.abre-fecha').hide(); 

9. if (SC.foto'J.attrCwidth’) > larguraMini) { 

10. SC.foto').animate( 

11. {width:larguraMini, height:alturaMini, opacity:0.2}, 

1500, functionO { 
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12 . 


13. 

14. 

15. 

16. 


17. 


18. 


19. 

20 . 

21 . 


22 . 

23. 

24. 

25. 


26. 


27. 

28. 


$(’.foto').animate ({opacity:1>, 1000); 

$('.abre-fecha').show().text('C1ique para ampliar'); 
.css({width:S('•foto').attr('width')}); 

}); 

$('.abre-fecha’).text('C1ique para ampliar') 

.css({width:S(’.foto').attr('width')}); 

} else { 

$('.foto').animate( 

{width:larguraFoto, height:alturaFoto, opacity:0.2}, 1500, 
functionO { 

SC.foto').animate Ctopacity:1}, 1000); 
S('.abre-fecha').show().text('Clique para fechar') 
.css({width:S('.foto').attr('width')}); 

}); 

}; 

}); 

}); 

</script> 



[arquivo-12.2d.html] 


No arquivo que ilustra essa solu<;ao, utilizaram-se a mesma imagem e mar- 
ca<;ao HTML das solu^oes anteriores e definiram-se tanto o thumbnail como a 
imagem ampliada com dimensoes diferentes das adotadas nessas solu^oes. Fa^a 
uma copia do arquivo que ilustra este exemplo e altere, no script, as dimensoes 
do thumbnail e da imagem ampliada, para verificar na pratica o funcionamento 
do script. 


Quinta etapa 

Para esta etapa, voce ira estudar uma solu^ao de amplia^ao de imagem que Simula 
o efeito lightbox. Esse efeito consiste em posicionar a imagem ampliada no centro 
da tela sobre uma mascara na cor preta transparente ocupando toda a tela. 

Para esta etapa, utilize uma marca^ao HTML e CSS conforme os codigos 
mostrados a seguir. 

► CSS; 

1. <style type="text/css" media="all"> 

2. body {margin:20px 0; padding:0; background:#d6e2e5;} 

3. #tudo {width:600px; font:80%/1.2 Arial, Helvetica, sans-serif; margin:0 auto; 

padding:0 20px; color:#666; background:#fff; border:lpx dotted #999;} 

4. .foto{border:none; margin:lOpx;} 

5. .left {float:left;} 

6. .right {float:right;} 


Material com direitos autorais 



Material com direitos autorais 



Material com direitos autorais 



Material com direitos autorais 



Capitulo 12 ■ Imagens 


339 


Linha(s) 

Descri^ao (cont.) 

I. inha 14 

Acrescenta o caminho para a imagem ampliada, no elemento ing 
criado anteriormente. 

Linhas 15 a 17 

Define regras CSS de posicionamento para a imagem ampliada. 
Note que a folha de estilo da pagina definiu posicionamento 
absolute) (cm relayao ao elemento body) para a imagem. As co- 
ordenadas left e top aqui definidas posicionam a imagem no 
centro da tela. Veja figura 12.4 para detalhe. 

I. inha 18 

Coloca, no documento, o elemento img criado anteriormente 
com seu conteudo e regras CSS. A seguir, define uma fun^ao a 
ser executada quando o usuario clica a imagem ampliada. 

Linha 19 

Faz desaparecer a imagem ampliada com o uso do efeito fade0ut() 
e velocidade de 1 segundo. 

Linha 20 

Faz desaparecer a mascara com o uso do efeito fadeOutO na 
velocidade de 1,5 segundo. 


Na figura 12.4, mostramos o efeito final e as dimensoes citadas nas linhas 16 
e 17 do script para esclarecer o posicionamento no centro da tela. 



OLivro jQucry do Maujor | Imagens e galcrias dc fotos Mozilla Hrcfox 


Arquivo Cdftar E«t<r HistdrKO Favorfcos Ferramentas Ajyda 


s aoc u tnanq mem use 


•aJ’’ 


Figure 12.4 - Efeito lightbox finol. 
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Linha(s) 
Linha 4 

Linha 5 


Linha 6 
Linha 7 


Linha 8 

Linha 9 
Linha 10 
Linha 12 


Linha 13 


Descri^ao (cont.) 

Define uma fungao a ser execurada quando o usuario clica uma 
imngem da galeria. 

Impede queonavegadorsigao link para oarquivo da imagem. Afinal, 
voce t 1 que ira definir como a imagem sera ampliada, nao desejando 
simplesmeme um link para o arquivo da imagem. 

F.sconde toda a galeria. 

Testa para saberseoclique toi cm um thumbnail ou cm uma imagem 
ampliada. A condigao de teste e para saber se a largura da imagem e 
ntaior que a do thumbnail (a largura e de lOOpx no exemplo). Neste 
caso, a imagem clicada toi a ampliada. Quando a pagina e carrega- 
da, o primeiro clique sera obrigatoriamente em um thumbnail e o 
teste resulta talso com o script indo para a linha 11. Supondo que 
uma imagem ampliada toi aberta e o usuario realiza um clique para 
fecha-la, o script segue para a linha 8. 

Reduz as dimensoes da imagem ampliada para as dimensoes do 
thumbnail, para recoloca-la na galeria. 

Mostra a galeria. 

Restabelece o texto da dica para o usuario. 

Aqui comcga a ag3o logo que a pagina e carrcgada e o usuario clica 
um thumbnail. Amplia a imagem clicada, altcrando sens atributos 
para largura e altura.e revela usando o clcito slideDown(). 

Altera o texto da dica ao usuario. 


Observe, na figura 12.6, o efeito final da ampliagao em uma tomada no mo- 
mento em que a ampliagao estava sendo processada. 


*3 Livro jQuery do Maujor | Imagens e galenas de lotos - Mo/illa Firefox - |[n |fX | 


Arqwvo Editar Ext* Htstorico Favontos Ferrarnenias Ajuda 


Fotos de Brasilia 



Figura 12.6 - Galeria, imagem em ampliaqao. 
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Este script apresenta um comportamcnto indcscjado quc prccisa scr corrigido. 
Para visualizar tal comportamcnto, abra oarquivo-l2.3a.html que con tern oexemplo, 
clique um thumbnail para ampliar a imagem e, a seguir, tambem esta,enquanto 
esta scndo ampliada, ou seja, antes dc sc complctar a amplia^ao. 

Voce vai notar que o clique na imagem cm movimento faz que o processo 
de amplia^ao sc inicic sem ter sido completada a primeira ampliagao e a partir 
dai o script talha complctamente, dcsconfigurando a galeria. Para resolver esse 
comportamcnto, c nccessario desabilitar o clique na imagem enquanto esta 
sendo ampliada. 

Em linguagem corrente,deseja-se o seguinte: enquanto a imagem estiver em movi¬ 
mento de amplia^ao, nao execute a fun^ao disparada porumcliquenela,ou,ainda,por 
nega^ao de eondi^ao: execute a funf ao somente se a toto nao estiver sendo animada. 
Usando a condi^ao de nega^ao e traduzindo para linguagem jQuery; tem-se: 

if (ISC’foto’).is(’:animated’)) {//permitir clique para executar a fun<;ao} 

Complementarmente, sera nccessario desabilitar o cursor-padrao indicando 
link (maozinha) durante a animayao, sendo o script: 

if ($('.foto').is(’:aniniated')) {($('.foto').css('cursor’, 'default')}; 


Finalmcntc, o script com os acrcscimos necessarios para corrigir o compor- 
tamento estranho detcctado no script anterior: 

1. <script type="text/javascript"> 

2. S(document).ready(function() { 

3. S('.foto').each(function() { 

4. S(this).click(function(event) { 

5. event. preventDefaultO; 

6. if (!S(this).is(':animated')) { 

7. $('.foto').hide(); 

8. if (S(this).attr('width') > 100) { 

9. S(this).attr({width:100, height:75>); 

10. $('.foto’).show(); 

11. $('.abre-fecha').text('Clique para ampliar'); 

12. } else { 

13. $(this).attr({width:500, height:375}).siideDown(1500); 

14. $('.abre-fecha').text('Clique para fechar'); 

15. } 

16. } 

17. if ($('.foto').is(':animated')) {$('.foto').css('cursor', 'default')}; 

}); 

18. }); 

19. }); 

20. </script> 

9 } [arquivo-12.3.1 b.titml] 
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Linha(s) Descriqao 

Linha 11 Reduz a opacidade da imagem ampliada para 30%. 

Linha 12 Coloca a imagem ampliada dentro da tela. 

Linha 13 Aninia a imagem ampliada aumentando sua opacidade de 30% para 

100% em urn intervalo de tempo de 2 segundos. 


12.4 Slide-show 

Nesta forma de apresentayao, a galeria de imagens e construtda sem auxilio de 
thumbnails, sendo apresentada inicialmente uma imagem em seu tamanho na¬ 
tural quc sera substitutda pcla scguintc com o uso de um cfeito de transi^ao. O 
metodo de substituigao das imagens podc ser automatico ou por interagao do 
usuario com um mccanismo de navcga^ao. 


Primeira etapa 


Nesta etapa, voce ira retirar os thumbnails e apresentar inicialmente na pagina 
uma das imagens em seu tamanho ampliado. Uma dica ao usuario ira instrui-lo 
a clicar a imagem apresentada. A cada clique, havera a troca da imagem em uma 
apresenta^ao do tipo slide-show. 


A marca^ao HTMLe as CSS sao as da pagina basica e o script para essa pro- 
posta e mostrado a scguir: 

1. <script type="text/javascript"> 

2. S(document).ready(function() { 

3. S('.abre-fecha’).text('Ca1eria: clique a foto'); 

4. $('#ga1eria') 

5. •css({ 

6. position:'relative', 

7. width: '500px\ 

8. height:* 375px' 

9. }); 

10. S('.foto').attr({width:500, height:375}) 

11. ,css({position:'absolute', left:0, zlndex:l}) 

12. .click(function(event) { 

13. event.preventDefaul t(); 

14. $(this).slideUp(1500, function() { 

15. SCthisJ.showO.prependToC^galeria^.cssCcursor', 'pointer'); 

16. }); 

17. }); 

18. }); 

19. </script> 

♦1 [arquivo-12.4a.html] 
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Codigo comentado: 


Linha(s) 
Linha 3 


Linhas 4 a 9 


Linha 10 

Linha 11 


Linha 12 
Linha 13 
Linha 14 

Linha 15 


Descri^ao 

Troca o tcxto da dica ao usuario. Note qnc na marcagao o tex- 
to c: “Clique para ampliar”, que c apropriado para a galeria c 
funciona sem o script. 

Dimensiona o div container de todas as imagens para uma lar- 
gura e altura iguais as da imagem ampliada. O posicionamento 
relativo destina-se a criar uni contexto de posicionamento, pois 
sera udlizado 2 -index para colocar uma imagem sobre a outra 
no container e essa propriedade CSS so funciona para elemen- 
tos posicionados. Voce vera adiantc que cada imagem recebera 
posicionamento absoluto dentro do container. 

Amplia as imagens para seu tamanho natural, pois na marca¬ 
gao estao reduzidas. Este metodo sobrescreve as dimensdes da 
marcagio. 

Posiciona cada imagem dentro do container de forma absoluta, 
no mesmo lugar, c atribui a todas elas o mesmo z-index. De 
acordo com as Recomendagoes para CSS,elementos com mesmo 
z-index sao empilhados, levando-se cm conta a ordem cm que 
aparecem na marcagao. O critcrio c que o elemento que se segue 
rcccbc maior z-index. Neste caso, as imagens foram marcadas de 
1. jpg arc 10. jpg e, consequcntemenre, o maior z-index sera da 
imagem 10. jpg e o menor, da imagem 1. jpg. Assim, a imagem 
visivel quando a pagina e carregada e a ultima imagem marcada. 
A sequencia de visibilidade do slide-show sera da ultima para 
a priineira imagem marcada. Pode-se facilmente alterar essa 
sequencia fazendo um loop pelas imagens com o metodo each() 
e um contador. Esta solugao sera um bom exerefeio para voce 
treinar seus conhecimentos. 

Define uma fungao a scr execurada quando o usuario clica uma 
imagem. 

Dcsabilita a agao-padrao do navegador, impedindo que ele siga 
o link para o arquivo da imagem. 

Esconde a imagem com efeito de animagao slidellpO e define 
uma fungao a ser executada ao final da animagao. Isto ini revelar 
a imagem que se segue no empilhamento. 

Mostra a imagem que acaba de scr escondida c move-a para o 
inicio da pilha. Com isso, adquire o z-index mais baixo e so ira 
apareccr na segunda passada do slide-show. A imagem toi movi- 
da, mas o elemento a que era seu container nao foi junto, entao 
sera necessaria a declaragao CSS cursor pointer para a segunda 
passada do slide-show. Note, ainda, que ao declarar slidellpO 
para a imagem, esta desaparece e permanece invisivel. Por isso, 
utiliza-se o metodo show() para restabelecer a visibilidade da 
imagem. 
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O Livro jQuery do Maujor Imagens e galerias de fotos - Mozilla Firefox |^T|[n (><^ 


Arquivo EcStar Exibir Hetbrko Favorites Ferramentas Ajuda 


Fotos de Brasilia 



Titulo nivel 2 

Lcrom ipsum dolor zr. amot, oonrectesuor adiprsomg elit fcfcibi oleilend punis qua boreet 
faucibus, jvte jjjue maliniada mi. id rtwncus augue lorem eget skt. Lh solcitudn sodates 
pw;. Phallus lit«ro fsfif, Wandil r»o, commode ul. imported ut. nibh. Suxperrdure potenti 
Donee 'jltamcoiT-er cursos dolor 


Figuro 12.8 - Golerio, novegoqoo por botoes. 

E necessario acrescentar algumas rcgras CSS na folha dc cstilos basica da 
pagina quo sao mostradas a seguir. 

► CSS: 

#galeria a, #galeria a:visited { 
text-decoration:none; 
color:#333; 
padding:2px 6px; 
background:#999; 
margin-right:2px; 

} 

#galeria a:hover, #tudo #galeria a.corrente { 
color:#999; 
background:#ccc; 

} 

Essas rcgras CSS dcstinam-sc a cstilizar os botoes dc navcga^ao. Note que sc 
criou a classc corrente para scr inscrida no botao clicado com a finalidadc dc dcs- 
taca-lo, usando rcgras CSS apropriadas, e assim fornecer ao usuarioa informa^ao 
sobre qual imagem esta sendo visualizada. 
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► jQuery 

1. <script type="text/javascript"> 

2. S(docuinent).ready(function() { 

3. $('.abre-fecha').hide(); 

4. $('.foto').each(function(i) { 

5. $(this).replaceWith('<span >' + (i+1) + '</span>') 

6. S^galeria'J.cssC’textAlign’, 'center'); 

7. }); 

8. $('<div id="tela"ximg src=”l.jpg" alt="Descri<;ao da imagem" /></div>') 

9. .insertBefore('#galeria') 

10. $('#galeria a').click(function(event) { 

11. event. preventDefaultQ; 

12. $('#ga1eria a'J.reinoveClassCcorrente’); 

13. $(this).addClass(’corrente'); 

14. S(’#tela img').attr('src', $(this).text() + '.jpg') 

15. .css('opacity', '0.3').animate({opacity:l}, 1500); 

16. }); 

17. }); 

18. </script> 

[arquivo-12.4c.html] 


Codigo comentado: 


Linha(s) 
Linha 3 

Lin ha 4 
Linha 5 


Linha 6 
Linha 8 

Linha 9 

Linha 10 


Descri<;ao 

Esconde a dica ao usuario, pois so e necessaria quando JavaScript 
estiver desabilitado no navegador, nao sendo necessaria nesta solu- 
^ao. 

Inicia um loop por todos os elementos img quc marcam as fotos da 
galeria. 

Substitui cada elemento imagem cncontrado por um clemcnto span 
contendo um numero. Serao tantos elementos span quantos forem as 
imagens da galeria numerados de 1 (um) ate o numero correspon- 
dente a quanridade de imagens encontrada. Com isso, criam-se os 
botoes de navegagaa 

Esta regra CSS centraliza o conjunto de botoes de navega<;ao cm 
rela^ao a imagem ampliada. 

Cria-se o elemento div#tela com dimensocs iguais as da imagem 
ampliada. Veja, na folha de estilos da pagina, as regras CSS para esse 
elemento div. 

Inseriu-se o elemento div criado acima dos botoes de navega^ao. 
Veja na marcagao da pagina que os botoes criados estao contidos 
no elemento div#ga1eria. 

Define-se uma fungao a ser executada quando for clicado um elc- 
mento a da navegagao horizontal numerica. 


Material com direitos autorais 



352 


jQuery ■ A Biblioteca do Programador JavaScript 


Linha(s) Descri^ao (cont.) 

Linha 12 Rcmovc-se a classe corrcntc quc destaca a imagem clicada. Este 
metodo entrant cm a^ao a parrir do segundo clique cm um numero 
da navega^ao. 

Linha 13 lnsere-se a classe corrente para dcstacar o numero clicado. 

Linha 14 Indica-se o caminho para a imagem clicada usando a troca do atri- 

buto src. 

Linha 1.5 Diminui-sc para 30% a opacidade da imagem a rcvclar e, a seguir, 
anima-se a imagem fazendo sua opacidade aumentar para 100%. 

Quarta etapa 

Ha situates nas quais se deseja fornecer um texto descritivo da imagem servindo 
como legenda. Ncsta etapa, vocc ira estudar como apresentar uma legenda para 
cada imagem da galeria desenvolvida na etapa anterior. 

Posicione a legenda, escrita sobre um fundo de cor solida e transparente, sobre 
a propria imagem, conforme mostra a figura 12.9. 



jvro jQuery do Maujor | Imogen* e gale rids de (otos - Mo/illa Firefox 


BE® 


ftrquivo £dtar E»t»r Htstorico Favor t os Ferramentas Ajjda 

Fotos de Brasilia 


Figuro 12.9 - Galeria com legenda. 
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A legenda devera constar da marcagao HTML da pagina basica c sera consti- 
tufda pelo texto do atributo alt de cada imagem. Isto e, se voce pretende adotar 
essa solugao em scu projeto, escreva a legenda para cada imagem no atributo em 
questao e o script ira extrai-la de la. 

O posicionamento da legenda e controlado por regras CSS. Neste caso, voce 
ira definir posicionamento relativo para o container da imagem e posicionamento 
absoluto para a legenda. Assim fazendo, controlara com regras CSS o posiciona¬ 
mento da legenda sobre a imagem. As regras CSS a acrescentar na folha de estilos 
do script desenvolvido na etapa anterior sao mostradas a seguir. 

► CSS: 

#tela { 

position:relative; 

width:500px; height:375px; margin:0 auto 5px auto; border:4px solid #999;} 

#galeria a, #galeria a:visited {text-decoration:none; color:#333; padding:2px 6px; 

background:#999; margin-right:2px;} 

#galeria a:hover, #tudo #galeria a.corrente {color:#999; background:#ccc;} 

#tela p.legenda {position:absolute; width: 480px ; 1eft:0; bottom:0; 

font-size:14px; font-weight:bold; 

padding:2px lOpx; border-top:lpx dotted #fff; background:#000; margin:0;} 

A legenda sera marcada dentro de um paragrafo ao qual sc atribuiu a classc 
denominada legenda. O paragrafo sera posicionado de forma absoluta, com o uso 
de coordenadas left e bottom, dentro do elemento div#tela que content a imagem. 
Aumentant-se o peso c tantanho da fonte,acrescentam-sc padding e border para me- 
lhorar a apresentagao do texto e dcclara-se margent inferior igual a 0 (zero) para 
o paragrafo, com o objetivo de evitar que a sobreposigao de margens desloque o 
texto para cinta em navegadores que nao o Internet Explorer. 

A seguir, veja os acrescimos e modificagoes no script anterior para obter o 
efeito proposto ncsta etapa: 


1. 

<script type=”text/javascript"> 


2. 

S(document).ready(function() { 


3. 

$(’ .abre-fecha’).hide(); 


4. 

SC.foto').each(function(i) { 


S. 

$(this).replaceWith ('<span title="’ + S(this).attr('alt') +" , >' + 
(i+1) + 1 </span>'); 

6. 

$('#galeria').css('textAlign’, 

'center'); 

7. 

}); 


8. 

S('<div id="tela"ximg src="l.jpg" 

alt="Descri<;ao da imagem" /></div>') 

9. 

.insert8efore('#galeria') 
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CAPITULO 13 

Plug-ins 


A bibliotcca jQucry c um software de codigo aberto c extcnsi'vcl. Isto significa 
que qualquer um, com conhecimento da linguagem dc programa^ao JavaScript, 
podc modificar, acresccntar ou rctirar funcionalidades dc scu codigo original 
para satisfazer necessidades de seu projeto. 

£ cssc carater dc extensibilidade que possibilita a cria^ao dc plug-ins, codigos 
escritos por terceiros, em linguagem JavaScript, que podem utilizar as regras 
de sintaxe da biblioteca e destinam-se a simplificar scripts que, com o uso das 
funcionalidades nativas, seriam mais complexos. 

Estc capitulo destina-sc a mostrar como funcionam os plug-ins para a bi¬ 
blioteca jQuery. Voce estudara como instalar e configurar os parametros de dois 
plug-ins escolhidos entre centenas existentes. Para uma listagem completa dos 
plug-ins dispomveis, consultc http://plugins.jquery.ccMn/. 


13.1 Introduce) 

13.1.1 Plug-ins de terceiros 

Para fins de cstudo, a instala^ao c o uso dc um plug-in serao divididos cm tres 
fases distintas, a saber: 

■ primeira fase: fazer o download do plug-in. 

■ segunda fase: linkar os arquivos que fazem o plug-in funcionar na pagina 
cm que sera necessario. 

■ terceira fase: escrever o codigo com os parametros requeridos pelo plug-in. 
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O amor do plug-in, ao disponibiliza-lo para uso publico, cm gcral cria uma 
pagina ou algumas paginas comendo informa^des sobrc o plug-in que fornecem 
sua descrigao e finalidade, instrufdes para instalagao, exemplos de aplica^ao, 
parametros de configuragao c informa^oes relacionadas. De posse dessas infor- 
ma^oes, voce tera condi^oes de instalar e lazer funcionar os plug-ins. 

13.1.2 Plug-ins nativos 

Alguns plug-ins destinados a criar funcionalidades para a interface do usuario 
fazem parte nativamente da biblioteca jQuery e constant de sua documentagao 
oficial. Tais plug-ins foram rcunidos em uma se^ao da biblioteca denominada 
jQuery/Ul e atualmente estao divididos em tres categorias como mostrado a 
seguir: 

■ Plug-ins nativos para intera^ao 


Plug-in 

Descri^ao 

Draggables 

Cria itens que podem ser arrastados com o uso do mouse. 

Dropables 

Cria alvos para soltar objetos arrastados. 

Sortable 

Manipula e ordena listas com o mouse. 

Seletables 

Seleciona itens com o mouse. 

Resisables 

Redimensiona objetos com o mouse. 

Widgets 

Plug-in 

Descrgao 

Accordion 

Cria paincis rctrateis para contcudos. 

Datcpickcr 

Cria um calendario para selecionar datas. 

Dialog 

Cria uma caixa de dialogo fluiuante. 

Slider 

Cria cursor deslizante. 

Tab 

Cria navega^ao por abas. 


■ Effects: reune uma serie de diferentes efeitos e a divisao formal em categorias 
nao tern valor pratico. Assim, sera apenas citado para que voce saiba de sua 
existencia. 


13.2 Plug-in jCarousel 

Este plug-in foi desenvolvido por Jan Sorgalla e sua documenta^ao encontra-se 
hospedadaem http://sorgalla.com/jcarousel/. Segundodefini^ao do autor.o plug-in 
destina-se a manipular horizontal ou verticalmente uma lista de itens. Os itens da 
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lista podcm scr conteudos estaticos ou dinamicos carregados via AJAX ou com 
uso de outra programagao qualquer. A manipulagao dos conteudos se faz com 
rolagem nos sentidos adiante e para tras, podendo ser animada ou nao. 

Trata-se de um plug-in extremamente util para construgao de galerias de ima- 
gens. O autor classifica o plug-in cm tres grupos contorme rclacionados a seguir: 

■ Conteudos estaticos 

• Carrossel simples vertical e horizontal. 

• Carrossel com scroll automatico. 

• Carrossel com o uso de fungoes callback. 

• Carrossel com controles externos. 

• Carrossel com personalizagao da imagem de partida. 

• Varios carrosseis cm uma pagina. 

■ Conteudos dinamicos 

• Carrossel com conteudo carrcgado via JavaScript. 

• Carrossel com conteudo carregado via AJAX. 

• Carrossel com conteudo carrcgado via AJAX de um script PHP. 

• Carrossel com conteudo carregado via AJAX com imagcns hospedadas 
no Flickr (stream e API). 

■ Especiais 

• Carrossel circular. 

• Carrossel para rolagem de textos. 

• Carrossel elastico. 

• Carrossel e Thickbox 3. 

• Carrossel com efeito de animagao personalizado. 

Como se pode notar, as possibilidades de uso sao inumeras e nao serao de- 
talhadas todas elas porque o objetivo deste capitulo e relatar a existencia dos 
plug-ins e mostrar os principios de instalagao e uso deles. Assim, voce estudara 
detalhadamente alguns exemplos do grupo conteudos estaticos e o uso especial 
com Thickbox 3. 
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13.2.1 Instala^ao 

A instalagao do plug-in consiste tao somente em fazer o download dos arquivos, 
descompacta-los, hospedar a pasta-raiz do plug-in e linkar os arquivos requeridos 
na pagina ondc voce pretcndc instala-lo. 

Visite http://sorgana.com/jcarousel/ e fa^a o download do arquivo disponivel 
nas versoes jcarousel.tar.gz ou jcarousel.zip. Descompacte o arquivo e hospede a 
pasta-raiz denominada j carousel. A pasta-raiz contem varias subpastas e arquivos 
destinados a criar os dilercntes efeitos a que o plug-in se propoe. Caso voce saiba 
exatamente o que csta fazenda, podera deletar pastas e/ou arquivos nao utilizados 
em seu projeto, mas se tiver duvidas, mantenha a pasta-raiz do plug-in com todos 
seus conteiidos intactos. Tendo descompactado e hospedado o plug-in, tenha 
agora uma visao geral de seus componentes. 

Na pasta examples, existem varios arquivos H'rMLcontendo exemplos de todas 
as possibilidades de cria^ao do plug-in. 

A pasta lib contem as versoes normal, compacta e codificada do script do 
plug-in. Uma dcssas trcs versoes dcvcra scr linkada ao documento que contem o 
carrossel. O criterio de escolha de uma delas e o mesmo adotado para a linkagem 
da biblioteca propriamente dita. A versao mais compacta e que demanda menos 
tempo de carregamento e a do arquivo jquery. jcarousel .pack. js. Essa pasta contem 
ainda o arquivo de estiliza^ao geral do carrossel denominado jquery. jcarousel .css, 
quedevera scr linkado a pagina do carrossel, c uma subpasta denominada thickbox 
contendo os arquivos necessarios a obtenyao do efeito thickbox no carrossel. 

A pasta skins contem duas subpastas denominadas ie7 e tango. Essas subpastas 
contem a folha de estilos e imagens necessarias para duas opyoes de apresenta^ao 
visual, ou temas, do carrossel. Voce pode personalizar a apresenta^ao criando seu 
tema em uma subpasta com o nome do tema e nela inserir uma folha de estilo e 
imagens personalizadas. Se voce pretende personalizar um skin, use como ponto 
de partida uma das duas folhas de estilo para um dos temas-padrao, mantendo 
o nome dos scletores, e grave-a com o nome skin.css. 

Assim, toda pagina que contiver qualquer uma das versoes de instala^ao do 
carrossel devera ser linkada conforme mostrado a seguir: 

1. <head> 

2 . 

3. <script type=”text/javascript" src="../jquery-1.2.6.js M x/script> 

4. <script type="text/javascript" src="jcarousel/lib/jquery.jcarousel.pack.js"> 

</script> 
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6. <script type="text/javascript"> 

7. jQuery(document).ready(function() { 

8. jQuery('#chorizontar).jcarousel(); 

9. jQuery(’#cvertical').jcarousel({ 

10. vertical:true 

11 . }); 

12 . }); 

13. </script> 



[arquivo-13.3a.html] 


C'odigo comcntndo: 


Linha(s) 

Unha 1 
I.inha 2 

Linha 3 
Unha 4 

Linha 5 

Linhas 7 a 12 
Linha 8 


Linhas 9 c 10 


Descri^o 

Link para a bibliotcca jQuery. 

Link para o plug-in jCarousel. Este link d event ser colocado apos 
o link para a biblioteca. 

Link para a folha de estilo geral. 

Link para a folha de estilo do tema ie7 que sera utilizada na 
versao horizontal. 

Link para a folha de estilo do tema tango que sera usada na versao 
vertical. 

Container para scripts jQuery. 

Sintaxe para o carrossel horizontal. Basta passar como parame- 
tro o valor do id do elemento ul que content as imagens para 
o carrossel. Veja, na marca^ao HTML mostrada anteriormente, 
que o id adotado foi chorizontal. 

Sintaxe para o carrossel vertical. Basta passar como parametro 
o valor do id do elmento ul que content as imagens para o car¬ 
rossel e a seguir definir vertical :true. Veja na marca^ao HTML 
mostrada anteriormente, que o id adotado foi cvertical. 


O resultado final e mostrado na figura 13.1. 


Para controlar a velocidade da rolagem e o ntimero de imagens a rolar de cada 
vez, use os parametros destacados a seguir: 

jQuery(document).ready(functionC) { 
jQuery('fchorizontal').jcarousel({ 

scroll:2, // numero de imagens a rolar de cada vez 

animation:1800 // velocidade da rolagem em milissegundos 


}); 


}); 
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Wllvro jQuery do Maujor | Plugins Mo/ilia Firefox fCJfnj'X \ 


ArtJJVO Ed*9» Eifor £j*leriC0 FavoUtot Fetrafrosntai Aj^da 


Carrossel horizontal 



Carrossel vertical 



♦ 


Figure 13.1 - Carrossel simples. 


13.4 Carrossel com scroll automatico 

Nesta versao, o carrossel executa a movimentagao das imagens automaricamente, 
em uni intervalo de tempo configuravel. Ao atingir a visualizagao das ultimas 
imagens, a rolagem volta instantaneamente ao inicio (configuravel como se vera 
adiante), repetindo-se o ciclo indefinidamente. Sao fomecidas as setas de coman- 
do manual e caso o usuario clique uma delas, a rolagem automatica cessa e o 
carrossel passa a funcionar sem ela, ate que se recarregue a pagina. Se o usuario 
coloca o ponteiro do mouse sobre uma imagem, cessa o scroll automatico ate 
que ele retire o ponteiro de cima da imagem. 
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Codigo comentado: 

Linha(s) Descri^ao 

Linha 1 Link para a biblioteca jQuery. 

Linha 2 Link para o plug-in jCarousel. Este link devera ser colocado apos 

o link para a biblioteca. 

Linha 3 Link para a folha de estilo geral. 

Linha 4 Link para a folha dc estilo do tema ie7 que sera usada ncstc 

excmplo. 

Linhas 5 a 18 Content a definigao de uma fungao-padrao do plug-in denomi- 
nada pelo autor de mycarousel_initCallback(carousel). Deve ser 
inserida na seyao head do documento exatamente como mostrada 
no script. Copie e cole, retirando da documentayao oficial do 
plug-in ou do arquivo HTMLdeste exempla 

Linhas 7 a 12 Desabilira o scroll automatico quando o usuario clica uma das 
setas para scroll manual. 

Linhas 13 a 17 Para e reinicia o scroll automatico quando o usuario aponta ou 
retira o pontciro do mouse de cima da imagem. 

Linhas 19 e 25 Container para scripts jQuery. 

Linha 20 Passagem do parametro valor do id escolhido para o elemenro 

ul de sua marca^ao. 

Linha 21 Aqui voce define o tempo em segundos entre cada scroll auto- 

matico. Escolhcu-se 1 segundo para fins dc demonstragao. 

Linha 22 Aqui voce controla o reimcio do ciclo automatico. O valor-padrao 

ou se nao forespecificado um valor,o scroll automatico ini perdu- 
rar por um ciclo somente. Os valores possiveis sao last, first, both, 
null (padrao). Para maiores detalhes, consultc http://sorgalla. 
com/projects/jcarousel/fConfiguration. 

Linha 23 Chama a fungao definida anteriormente. 

Talvez voce queira desabilitar os botoes para scroll manual. Neste caso,acres- 
cente o seguinte no script anterior: 

jQuery(document).ready(function() { 

jQuery('#cscroll’)-jcarousel({ 
auto:l, 
wrap:‘last’, 

buttonNextHTML:null, // Desabilita o botao: proximo 
buttonPrevHTML:null, // Desabilita o botao: anterior 

initCal1 back:mycarousel_initCal1 back 

}); 

}); 
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No arquivo quo ilustra esse cxemplo sao aprcscntadas duas vcrsoes conformc 
mostrado na figura 13.2. 


*3 Livro jQuery do Maujor | Plugins ■ Mozilla Firefox 





Carrossel com scroll automatico e controle manual 



Carrossel com scroll automatico sem controle manual 



Figura 13.2 - Carrossel com scroll automatico. 


13.5 Carrossel com comandos externos 

Para esta vcrsao, voce devera incluir uma folha dc cstilo para os comandos, uma 
marcagao para a navega^ao por botoes e a marca^ao dc um menu select para a 
escolha dc op^des, tudo conformc mostrado a scguir. 

Existe uma folha dc estilo-padrao que controla a a presen ta^ao dos comandos 
externos e devera ser incorporada ou linkada a pagina que content o carrossel. 
Voce pode personalizar a apresenta^ao alterando as regras de estilo na citada 
folha sem, con tudo, altcrar o nome dos seletores CSS. Veja a scguir a folha de 
cstilo para esta vcrsao do carrossel: 

<style type*"text/css"> 

/** 

* Folha de estilos para os controles do carrosel. 

V 

.jcarousel-control {margin-bottom:10px; text-align:center;} 

.jcarousel-control a {font-size:75%; text-decoration:none; padding:0 5px; 
margin:0 0 5px 0; border:lpx solid #fff; color:#eee; 
background-color:#4088b8; font-weight:bold;} 
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.jcarousel-control a:focus, 

.jcarousel-control a:active {outline:none;} 

.jcarousel-scroll {margin-top:lOpx; text-align:center;} 

.jcarousel-scroll form {margin:0; padding:0;> 

.jcarousel-scroll select {font-size:75X;} 

#mycarousel-next, 

#mycarousel-prev {cursor:pointer; margin-bottom:-10px; 

text-decoration:underline; font-size:llpx;} 

</style> 

A marca^ao HTMLe mostrada a seguir: 

<div id="mycarousel" class="jcarousel-skin-ie7"> 

<div class="jcarousel-control's 
<a href="#">l</a> 

<a href="#">2</a> 

<a href="# M >9</a> 

<a href="#">10</a> 

</div> 

<ul dass=" jcarousel-skin-ie7”> 

<1 iximg src="l_s.jpg" alt="Descri<;ao da foto" width="7S" height="7S" /></li> 

<1i><img src="10_s.jpg" alt="Descricao da foto" width="75" height="75" /></li> 

</ul> 

<div class="jcarousel-scroll"> 

<form action=""> 

<a href="#" id="mycarousel-prev">&laquo; Anterior</a> 

<select> 

<option value="l">Scroll 1 item por click</option> 

<option value="2">Scroll 2 items por click</option> 

<option value=”3">Scroll 3 items por click</option> 

<option value="4">Scroll 4 items por click</option> 
coption value=”5">Scroll 5 items por click</option> 

</select> 

<a href="#" id="mycarousel-next">Pr6xima &raquo;</a> 

</form> 

</div> 

</div> 

Cric a marca^ao para o carrosscl cm trcs blocos dc codigo como mostrado. Os 
trcs blocos dcvcm ter como container, obrigatoriamcnte, um divcom id="mycarousel" 
e dass="jcarousel-skin-nomedotema". Nao altere esses nomes identificadores. 
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O primeiro bloco dc codigo tem corno container um divcom class="jcarousel- 
controls" e content tantos links mortos quantas forem as imagens constantes do 
carrossel. Neste exemplo, ha dez imagens. 

O segundo bloco de codigo e o elemento ul com as imagens. Esse bloco difere dos 
ja estudados para as versoes anteriores porque aqui nao ha necessidade de atribuir 
um id para o elemento ul, bastando definir uma classc com o nome do tema. 

O terceiro bloco de codigo deve estar contido em um elemento div com 
id="jcarouse1 -scroll" e marca um menu select para escolha do numero de imagens 
a ser rolada em cada clique para avan^ar ou recuar. 

O script que faz funcionar esta versao e o seguinte: 


<script type="text/javascript"> 

function mycarousel_initCallback(carousel) { 

jQuery('.jcarousel-control a').bind('click', function() { 

carousel.scroll(jQuery.jcarousel.intval(jQueryCthis).textQ)); 
return false; 

}); 

jQueryC.jcarousel-scroll select'J.bindCchange', function() { 

carousel.options.scroll = jQuery.jcarousel.intval(this.options[this. 

selectedlndex].value); 
return false; 

}); 

jQueryCtmycarousel-next’j.bindCclick', functionO { 
carousel.next(); 
return false; 

}); 

jQuery('#inycarousel-prev’).bind('click', functionO { 
carousel.prev(); 
return false; 


}; 


}); 


jQuery(document).ready(function() { 
jQuery('#mycarousel').jcarousel({ 
scroll: 1, 

initCallback:mycarousel_initCal1 back, 
buttonNextHTML:nul1, 
buttonPrevHTML:null 


}); 


}); 

</script> 



[arquivo-13.5a.html] 
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Veja, na figura 13.4, o carrosscl com cfciro thickbox. 



Figura 13.4 - Corrossel corn efeito thickbox. 


13.7 Plug-in jQuery Accordion 

Este plug-in foi desenvolvido porJorn Zaefferer c sua documentayao encontra-se 
hospedadaem http://bassistance.de/jquery-plugins/ jquery-plugin-accordion/.Trata-se 
dc uni plug-in para obter o conhecido efeito sanfona e pode ser usado para es- 
conder e rcvelar tanto conteudos textuais como listas de links. No caso de listas 
dc links, o plug-in e util no desenvolvimento de mecanismos de navegayao. 

Admite varias estruturas de marcayao HTML, cada uma de acordocom a natu- 
reza dos conteudos a revelar e esconder. As folhas de estilo para a presen tayao das 
diversas versoes criadas devem scr desenvolvidas de acordo com a necessidade de 
cada projeto, contudo a documentayao do plug-in em sua seyao de demonstrayao 
desenvolve quatro exemplos de uso do plug-in com respectivas folhas de estilo 
que podem servir de base para a criayao de folhas de estilo personalizadas. 

Voce ira estudar duas variantes de marcayao para uso pratico do plug-in: uma 
para conteudos textuais e outra para um mecanismo de navegayao. 
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13.7.1 Instala^ao 

A instalagao do plug-in consiste tao somente em fazer o download dos arquivos, 
descompacta-los, hospedar a pasta-raiz do plug-in e linkar os arquivos requeridos 
na pagina ondc voce prctcndc instala-lo. 

Visite http://bassistance.de/jquery-plugins/jquery-plugin-accordion/ e faga odown¬ 
load do arquivo dispom'vel denominado jquery.accordion.zip. Descompacte o 
arquivo e hospcde a pasta-raiz denominada jquery-accordion. A pasta-raiz contem 
varias subpastas c arquivos destinados a criar os difcrctites efeitos a que o plug-in 
se propoe. Caso voce saiba exatamente o que esta fazendo, podcra dclctar pastas 
e/ou arquivos nao utilizados em seu projeto, mas se tiver duvidas, mantenha a 
pasta-raiz do plug-in com todos os seus conteudos intactos.Tendo descompactado 
e hospedado o plug-in, veja melhor seus componentes. 

Essa pasta contem ainda as versoes normal, compacta e codificada do script 
do plug-in. Uma dessas tres versoes devera ser linkada ao documento que contem 
o efeito sanfona. O criterio de escolha de uma delas e o mesmo adotado para a 
linkagem da bibliotcca propriamcnte dita. A versao mais compacta e que demanda 
mcnos tempo de carrcgamento e a do arquivo jquery. jcarousel .pack. js. 

Na pasta demo, os arquivos index.html e nested.html contem exemplos de todas 
as possibilidades de cria^ao do plug-in. Voce ira estudar com dctalhes os dois 
primeiros exemplos contidos no arquivo index.html. 

A pasta lib contem arquivos plug-ins complementares a serem usados em 
diferentes situates, conforme se vera adiante. Nessa pasta, encontra-se um 
plug-in denominado jquery.dimensions. js,que,a partirda versao 1.2.6 da biblioteca, 
foi incorporado a ela, nao havendo mais necessidade de seu uso em separado a 
partir dessa versao. 

A pasta test contem scripts nao relacionados diretamente ao desenvolvimento 
do efeito sanfona cm sites. 

Assim, toda pagina que contenha uma das versoes de instalagao do efeito 
sanfona devera ser linkada conforme mostrado a seguir: 

1. <head> 

2 . 

3. <script type=”text/javascript" src="../jquery-1.2.6.js"x/script> 

4. <script type="text/javascript" src="jquery-accordion/jquery.accordion.js"></script> 

5. <script type="text/javascript" src="jquery-accordion/xxxxxxxx.js"x/script> 

6. </head> 
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10. <a>Instala<;ao do plug-in</a> 

11. <div> 

12. ...conteudo... 

13. </div> 

14. </div> 

Codigo comentado: 

Linha(s) Descri^ao 

Linhas 1 a 15 Urn div container para toda a marcayao. A esse container deve 
ser atribufdo uni id com nome de sua livre escolha, no exemplo 
adotado, id="a_um", e uma classe com nome basic. Essa classc 
seni o sclctor para a folha dc cstilo do efcito. 

Linhas 2 a 5 Um bloco de codigo que se repete tantas vezes quantos forem 
os titulos dos conteiidos a revelar. Note que esse bloco se repete 
duas vezes no exemplo, linhas 6 a 9 e 10 a 14. 

Linha 2 A marca<;ao do tftulo a revelar devera ser feita com o elemento 

a. Nas linhas 6 e 10, estao os outros dois titulos. 

Linhas 3 c 5 Um div container para os conteiidos a rcvclar c escondcr. 

Linha 4 Marca^ao para os conteiidos. Aqui voce poderii usarqualquer ele¬ 

mento HTML requerido pela semantica do conteudo marcado. 

A folha dc estilo-padrao, para cssc cfcito, retirada da documenta^ao do plug-in 
e mostrada a scguir. Note que o container geral c um elemento div com a classe 
basic conformc mostrado na marca^ao anterior: 

1. .basic {width:260px; border:lpx solid black;} 

2. .basic div {padding:lOpx;} 

3. .basic a {cursor:pointer; display:block; padding:5px; text-decoration:none; 

font-weight:bold; 

background:#00a0c6 url(jquery-accordion/demo/AccordionTabO.gif); 
border-top:lpx solid #fff; border-bottom:lpx solid #999;} 

4. .basic a:link:hover, .basic a:hover 

{background:#fff ur1(jquery-accordion/demo/AccordionTab2.gif);} 

5. .basic a.selected {background:#80cfe2 

url(jquery-accordion/demo/AccordionTab2.gif);} 

Codigo comentado: 

Linha(s) Descri^ao 

Linha 1 Define uma largura igual a 260px para o container c uma borda de 
lpx em volta dele. 

Linha 2 Define um espagamento de lOpx em volta dos conteiidos a revelar. 

Note que se existir um elemento div na marcagao dos conteiidos, 
esse espagamento sera herdado. Se nao se desejar a heranga, crit* 
regra CSS apropriada para esses elementos. 
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Linha(s) Descrgao (cont.) 

I.inha 3 F.sriliza os n'tulos. O exemplo na documenta^ao usa uma imagem dc 
fundo para compor o fundo dos titulos. F.sta imagem csta na pasta 
demo do plug-in. 

Linha 4 Estiliza<,'5o para o esiado mouse over nos titulos. A folha de estilo 
original usa somente o seletor .basic a:hover, omitindo o selctor 
. basi c a: 1 ink: hover. Acrescentou-seeste seletor para serviro navegador 
Internet Explorer que nao reconhece o simples a: hover em elementos 
a nao marcados com o atributo href, como e o caso da marca^ao para 
o exemplo. Aqui tambem e usada uma imagem de fundo. 

Linha 5 Estiliza<,ao para o titulo corrente usando uma imagem de fundo. 

A sanfona simples admite duas versoes. A primeira com altura constante para 
o div revelado, independentemente da quantidade de conteudo. Tal altura e maior 
que a altura do div com mais quantidade de conteudo. A outra versao e com altura 
do div de acordo com a quantidade de conteudo. O parametro que diferencia as 
versoes e autoheight. Declarando autoheight:false a altura sera variavel. O valor- 
padrao de autoheight e true, ou seja, nada declarando, a altura sera fixa. 

No exemplo, ha duas versoes em uma mesma pagina, conforme mostra a 
figura 13.5. 


VHivro jQuery do Moujor | Plugins Mo7illa I ircfo* 


firqiivo £dtar Evbr ^stortro Fayoreas torranwntas Ajuda 



Sanfona simples 


Plugin iOuery Accordion 


Este plugin foi desenvoMdo pot Jflrn 
Zaeffner e sua cotumer.lajSo encontra-se 
nospedads em hni)//cass>ctance de 
'IQueiY- plugin sfiqueiY-plugin- at cordionl 
Tiata-se dc um plugin para oblei o 
ccnnecido eteito sanfona e code ser usado 
para escondet e revelar tanto conteudcs 
testuais como llslas deunH Neste u timo 
caso 6 empregado no desenvoMmento de 
metanismos de r.avegajao 


rsliinut.is ile m/ur.HTM( 
tostaiacao do pimjin 


Phigui jOneiy Accol diiHi 


Este plugin foi desenvoMdo pot Jflrn 
Zaefferec e sua documentajSo encortra-se 
nospedada etr- nttpj/bassistance de 
iiauery-piuginsilquerv-ptugin-acrordicnf 
Trata se de urr, plug n p3ra octet o 
con'ieciao efeiK' sartona e poda ser usado 
para esconder e revelar tanlo conteudos 
lertuats como Irslas de links Nesle ultimo 
caso e empiegado ro desenvt Pimento de 
metanismos de - avegajan 


Estiidin.is do in.ncag.V' HTML 
Instalagan do pknjiii 


Figuro 13.5 - Sanfono simples. 
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16. <lixa class="head" href="#">CSS em a<;ao</a> 

17. <ul> 

18. <lixa href*"http://vww.maujor...>Font interativo</ax/li> 

19. <lixa href="http:/MAV.maujor...>Text interativo</ax/li> 

20 . 

21. </ul> 

22. </li> 

23. </ul> 

Codigo comentado: 

Linha(s) Descri^ao 

Linhas 1 a 23 Urn elemento para listas niio ordenadas ul container para toda a 
marca^ao. A esse container deve scr atribuido urn id com nome 
navigation. Esse id sera o scletor para a folha dc cstilo do efeito. 

Linhas 2 a 8 Urn bloco de codigo que se repete tantas vezes quantos forem 
os titulos dos contetidos a revelar. Note que esse bloco sc repete 
duas vezes no cxemplo, nas linhas 9 a 15 e 16 a 22. 

Linha 2 A marcagao do titulo a revelar devera ser feita com o elemento a 

ao qual se atribuem uma classe denominada head e um atributo 
href«"#"(link morto). Esse elemento a, por sua vez, deve estar 
contidoem um elemento 1 i. Nas linhas 9 e 16 estao os outros dois 
titulos. O citado elemento 1 i, ak ; m de corner o titulo, c ; container 
para um elementoul ondeconstant todososlinks relacionadosao 
titulo. Trata-se de uma lista aninhada a lista container geral. 

A folha de estilo-padrao para esse efeito, rctirada da documcntagao do plug-in, e 
mostrada a seguir. Note que o container geral cum elemento ul com id="navigation" 
conforme mostrado na marca^ao anterior: 

1. Navigation {border:lpx solid #5263AB; margin:0; padding:0; width:200px;} 

2. Navigation a.head {border:lpx solid #ccc; background:#5263AB 

url(jquery-accordion/demo/collapsed.gif) no-repeat 3px 4px; color 
display:block; font-weight:bold; margin:0; padding:0; text-indent:14px; 
text-decoration:none;} 

3. Navigation a.head:hover {color:#ff9;} 

4. Navigation a.selected {background-image:url(jquery-accordion/demo/expanded.gif);} 

5. #navigation a.current {background:#ff9;} 

6. Navigation ul {margin:0;padding:0;> 

7. Navigation li {1 ist-style:none} 

8. Navigation li li a {color:#333; display:block; text-indent:lOpx; 

text-decoration:none;} 

9. Navigation li li a:hover {background:#ff9; color:#f00;} 
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<script type="text/javascript" src="../jquery-1.2.6.js"x/script> 

<script type="text/javascript" src="jquery-accordion/jquery.accordion.js"x/script> 

<script type="text/javascript" src="jquery-accordion/lib/jquery.easing.js"x/script> 

Para informayoes detalhadas sobre o plug-in jquery.easing.js, consulte o en- 
derc^o http ://gsgd.co.uk/sandbox/jquery/easing/. 

O script para essa versao e mostrado a scguir: 

1. <script type=”text/javascript"> 

2. jQuery(docuinent).ready(function() { 

3. jQue ry('#navigation').accordion({ 

4. active:false, 

5. header:'.head', 

6. event:'mouseover', 

7. fillSpace:false, 

8. animated:'easeslide' 

9. }); 

10 . }); 

11. </script> 

Codigo comentado: 

Linha(s) Descri^ao 

Linha 4 Fecha o menu no imeio. 

Linha 5 Nome da classe atribuida ao elemenro a que marca os titulos. 

Linha 6 Define o evento que abre o menu. Urilizou-se o valor mouseover no 

exemplo. Experimente mudar para click e observe a diferen^a. 

Linha 7 Parametro para definir a altura do menu aberto. Usou-sc false (este 

c o valor-padrao e nao declara-lo surtc o mesmo efeito) no exemplo 
para for^ar a altura dc acordo com o conrcudo rcvelado. O valor 
true mantem a altura constante independentemente do contcudo 
revclado, tazendo o menu estender-se mais. 

Linha 8 Interfere na acelera^ao da velocidade de anima^ao. Utilizou-se o 

valor easeslide no exemplo. Experimente mudar para bouceslide e 
observe a diferen^a. 

E somentc isso. Apos linkar o plug-in na pagina, criar uma folha dc cstilo 
para o efeito c dcsenvolver a marcagao HTML como mostrado, basta dcclarar 
jQuery('#um_nome_qua?quer').accordion() e alguns parametros, sendo utn_nome_qualquer 
o nome que voce escolheu para a ul container geral dos conteudos a revelar com 
o uso do efeito sanfona. 

Para maionesdetalhese outrasversoes dc implementagao,consulte a pagina oficial 
do plug-in localizada cm http://bassistance.de/jquery-plugins/jquery-plugin-accordion/ e 
a documcntayao no site jQuery em http://docs.jquery.com/UI/Accordion/accordion. 
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CAPITULO 14 

Menu Maujor 


Denomina-se menu Maujor o mecanismo tie navega^ao do site http://www.maujor.com 
que usa a biblioteca jQuery para seu funcionamenta Nao se tratade urn mecanismo 
de navcga^ao incdito nem dc uma inven^ao exclusiva c unica. Ao contrario, e sus- 
tentado por um script extremamente simples criado para incrementar a navega^ao 
que ja existia no site, sem necessidade de alterar a marca^ao 11TML. 

14.1 Introdu^ao 

O menu do site do Maujor foi criado e cxpatidido muito antes de a biblioteca 
jQuery ter se tornado uma realidade no universo do desenvolvimento de sites. 

O menu passou por quatro fases. A primeira fase foi desde sua cria^ao, quando 
come^ou com poucos links, ate o momcnto cm que a insergao de novos links 
passou a exigir uma coluna dc navega^ao muito extcnsa. Nessa ocasiao, iniciou-se 
a segunda fase, quando sc optou por um menu do tipo pop-up lateral, cm que os 
links para as materias cram rcvelados quando o usuario passava o mouse sobrc 
um titulo geral. A terceira fase baseou-se na solu^ao adotada no redesign de um 
grande portal brasileiro e consistiu em reduzir a altura do container do menu; 
com o uso de regras CSS apropriadas, for^ou-se o aparecimento de uma barra 
de rolagem vertical para tal container. 

Passado algum tempo, houve algumas criticas ao sistema de navega^ao do site. 
Embora fossem esporadicas e longc de ser unanimidade, considerou-se o estudo 
de uma alternativa para o menu. 

A quarta fase foi a implanta^ao de um script jQuery que atualmente faz fun- 
cionar o menu. A aceita^ao foi total e houve muitos e-mails de leitores pergun- 
tando como funciona o menu. Foram tais solicita^oes que motivaram a escrita 
deste capitulo. 
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Neste capitulo, sera dada enfase especial, alcm do script jQuery, a marc at; no 
HTMLe as regras CSS para a apresenta^ao do menu. Como base para o exemplo a 
desenvolver, sera adotado o menu atual do site, incluindo seus links funcionais. 


14.2 HTML e CSS 

Funcionalmente, trata-se de urn menu hierarquico de dois niveis. O primeiro 
m'vel contem um tftulo e sob ele estao os links para as materias relacionadas a 
esse titulo. 

O clemento HTML semanticamcntc corrcto para marca^ao de mccanismos 
de navegagao sao as listas HTML cm suas tres versoes: lista ordenada ol, lista 
nao ordenada ul e lista de definigao dl. Optou-sc pelo uso de listas nao ordena- 
das para marcar o segundo m'vel do menu e o clemento h3 para marcar o titulo 
ou primeiro m'vel. Outra solugao seria usar lista de definigao com o clemento dt 
para ti'tulos e dd para o segundo m'vel. Tal opgao de marcagao sera um exerci'cio 
para voce testar scu aprendizado. 


Observe a seguir um trecho da marcagao HTML do menu: 


1. 

<div id="menu"> 


2. 

<h3>0estaques</h3> 


3. 

<ul > 


4. 

<li><a href-"..." title-". 

. .">FAQ - CSS</ax/li> 

5. 

<lixa href-"..." title-". 

. .">QUIZ - CSS</ax/li> 

6. 

clixa href-"..." title= M . 

..">Editor CSS do DWMX 2004</ax/li> 

7. 

<li><a href="..title=". 

..">Aprenda CSS desde o inicio</ax/li> 

8. 

<li>..,</li> 


9. 

</ul> 


10. 

<h3>Fundamentos CSS</h3> 


11. 

A 

C 

V 


12. 

<lixa href-"..title-". 

. .">Introducao as CSS</ax/li> 

13. 

<lixa href="..." title-". 

.."> Sintaxe CSS</ax/li> 

14. 

<lixa href="..title-". 

..">Tipos de CSS</ax/li> 

15. 

<lixa href="..." title-". 

..">A propriedade CSS font</ax/li> 

16. 

A 

V* 

A 

\ 

V* 


17. 

</ul> 


18. 

<h3>Titulo primeiro nivel</h3> 


19. 

<!-- Repete marcacao anterior 

--> 

20. 

</div> <!— fim do divlmenu —> 



♦1 [arquivo-14.2a.html] 
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Estiliza^ao inicial 

Acrcscentc uma tblha de estilos na pagina do menu para melhorarsua apresenta^aa 
Observe um primeiro conjunto de rcgras CSS conforme mostradas a seguir: 

1. <style type="text/css M media="all"> 

2. #menu ul { 

3. list-style-type:none; 

4. margin:0; 

5. padding:0; 

6 . } 

7. #menu li a { 

8. display:b1ock; 

9. background:#d4dde4 url(seta.gif) no-repeat 98%; 

10. color:#333; 

11. border-left:5px solid #7d97ad; 

12. text-decoration:none; 

13. padding:3px 15px 3px 3px; 

14. margin-bottom:lpx; 

15. } 

16. #menu li a:hover { 

17. background:#dce3e9 url(seta.gif) no-repeat 98%; 

18. col or:#999; 

19. border-left:5px solid #cad2dd; 

20 . } 

21. </style> 

#\) [arquivo-14.2b.html] 

Codigo comentado: 

Linha(s) Descrigao 

Linhas 2 a 6 Rcrira os marcadores das lisras nao ordcnadas e os cspa^amenros- 
padrao de margim e padding para listas. Esses espa;amentos causam 
uma tabula^ao a esquerda dos itens de lista que, alem de variar de 
dimensao, de acordo com o navegador, sao implementados ora pela 
propriedade margin, ora por padding. A finalidade desta regra CSS e 
igualar a renderizayao da lista para todos os navegadores. 

Linha 7 Selctor para os links no cstado inicial. 

Linha 8 F.lemcntos HTML a sao elemcntos in-line c, como tais, ocupam a 
exata largura e altura necessarias a acomodar seus conreudos. Isro 
faz que, em um link de texto, somente a area do texto seja clicavel. 
O link em questao esta inserido em um elemento li que tern uma 
forma retangular e na qual estd inserido o texto do link. A decla- 
ragao display:block nesta linha torna o elemento a ntvel de bloco, 
ocupando todo o seu container e fazendo que toda a area retangular 
do elemento li seja clicavel. 
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Linha(s) 
Linha 9 

Linha 10 
Linha 11 

Linha 12 
Linha 13 

Linha 14 


Linha 16 
Linha 17 


Linha 18 
Linha 19 


Oescri^ao (cont.) 

Define a cor dc fundo azul-clara para o retangulo clicavcl e coloca 
uma seta decorativa no lado direito dele. 

Liege a cor preta para o texto do link. 

Define uma borda esquerda decorativa, na cor azul-escura, para o 
retangulo que conrem o link. 

Retira o sublinhado-padrao do texto do link. 

Define os espagamentos vertical e horizontal do texto do link em 
relagao aos limites internos do retangulo que o content. 

Define uma margin inferior para cada retangulo container dos links, 
abrindo um espago de 1 px no qual sera vista a cor de fundo definida 
para o elemento div#menu, criando a ilusao de uma linha de separa- 
gao entre os links. Uma opgao para essa regra CSS e declarar uma 
borda inferior de lpx na cor pretendida para a linha de separag2o, 
contudo, nesta opgao, ha uma jungao das margens do ultimo link 
aberto com a margem superior do ritulo, rcsultando uma margem 
de 2px nesse local. Altere o arquivo e comprove voce mesmo. 

Regra CSS para ocomportamento dos links quando o usuario passa 
o mouse sobre eles. 

Fundo dos links em cor azul mais clara e redefinigao da seta a dircita. 
Sc nao tivesse declarado a seta como imagem de fundo, esta seria 
coberta pela nova cor c nao apareccria na situagao dc mouse over. 

Cor mais clara para o texto do link. 

Cor mais clara para a borda esquerda. 


A renderizagao do menu, nos navegadores Firefox 3 e Internet Explorer 6, 
com as primeiras cstilizagocs e apresentada na figura 14.2. O cfeito mouse over c 
mostrado no segundo link na tomada da imagem para o Firefox 3. 


Bug no IE6 e anteriores 

Este primeiro conjunto de regras dc estilo causa a renderizagao do menu com 
um espagamento nao desejado, no navegador Internet Explorer 6 e anteriores, 
conformc mostra a figura 14.2. Este e um comportamento decorrcntc dc uma 
das maiores causas das inconsistencias dc renderizagao no IE6 c anteriores, fe- 
lizmente ja corrigida no IE7. Para maiores informagoes,consultehttp://www.maujor. 
com/tutorial/haslayout.php. 

Conforme explicado na materia publicada no link indicado no paragrafo 
anterior, para corrigir o bug mostrado, basta dar layout aos elementos li e a, 
acrescentando a seguinte regra CSS: 

* html li, * html li a {height:1%;} 
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r^Livro jQuery do Maujor | Menu Maujor Mozilla Firefox 

on® 

flrqufro Edtat Ejttt tester fco Favoiios C«rrament« Alyds 
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A 

|faq-css 

4 

QUIZ-CSS « 

4 

I Editor CSS do DWMX 2004 

* 

| Aprenda CSS desde o im'do 

4 

|l>evo aprender CSS3? 

4 

Fiuid-ainentos CSS 

3 1 tvro jQuery do Maujor | Menu Maujor - Microsoft Internet Explorer 

BID® 

Arquivo Editar Zcbr Favtxtos Ferrarriaritas Ajuda 

8f 

Destaques 

A 

| FAQ-CSS 

♦ 


1 QUIZ • CSS 

* 


| Editor CSS do DWMX 2004 

• 


| Aprenda CSS desde o inicio 

* J 



Figuro 14.2 - Menu Moujor: estilizaqao na primeira fase. 


Dimensoesdo menu 

O menu ocupa toda a janela do navcgador e estcndc-sc na vertical por todos os 
links de navega^ao, fazendo apareccr a barra de rolagem vertical. Defina uma 
largura para o menu, de modo que fiqtie contido na coluna de navega^ao do site. 
Delimite, ainda, uma altura maxima e fornefa uma barra de rolagem vertical 
para o menu. Adote uma largura de 200px e uma altura de 300px. Voce devera 
escolher essas dimensoes de modo que se adaptem ao layout do site. Estilize os 
cabe^alhos h3 que integram o primeiro nivel do menu. 

Observe as regras CSS a ser acrescentadas na folha de estilo inicial: 

1. body { 

2. font:llpx/1.2 Arial, Helvetica, sans-serif; 

3. background:#d6e2e5; col or:#666; 

4. padding:0; margin:0; 

5. } 
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6. #menu { 

7. width:200px; height:300px; 

8. overflow:auto; 

9. margin:30px 0; 

10. background:#999; 

11 . } 

12. #menu h3 { 

13. font-size:12px; cursor:pointer; 

14. line-height:18px; 

15. padding-1 eft:20px; 

16. margin:lpx 0; 

17. background:#cad2dd url(mais.gif) 3px center no-repeat; 

18. border-left:5px solid #7d97ad; 

19. } 

20. #menu H3.corrente {background:#cad2dd url(menos.gif) 3px center no-repeat;} 

21. * html 1i, * html li a {height:1%;} 



[arquivo-14.2c.html] 


Codigo comcntado: 

Linha(s) Descriqao 

Linha 1 Regras CSS gerais para a pagina que content o menu. 

Linha 7 Define as dimensoes maxi mas do menu. 

Linha 8 Cria barras de rolagem vertical e horizontal caso o conteudo do 
menu ultrapassc as dimensoes cstabelccidas. Ainda quc a dimen- 
sao vertical do menu quc voce csta projctando scja mcnor que as 
dimensoes cstabelccidas na regra CSS, declare overflow:auto para o 
caso de expansao futura. 

Linha 9 Define margens superior e inferior. 

Linha 10 Cor de fundo do menu. Esta e a cor das linhas horizontais que 
separam os retangulos dos links. 

Linha 12 Regras CSS para os cabe^alhos h3 do primciro nivel do menu. Note 
a declara^ao para mudanga do airsor indicativa de que o clique 
causara uma a^ao (no caso.abre os submenus) e rantbcm a dcfini^ao 
de uni sinal de mais (+) como uma imagem de fundo, indicando 
que ha algo a abrir quando se clica o cabe^alho. 

Linha 20 Regra CSS para colocar a imagem do sinal menos (-) no cabe^alho 
aberto. 

Linha 21 Hack para o 1E6 e anteriores conforme relatado anteriormente. 

A renderiza^ao do menu, nos navegadores Firefox 3 e Internet Explorer 7, com 
os acrescimos na folha de estilo e apresentada na figura 143. 
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** Livro jQuery do Maujor | Menu Mauj f.' Livro JQuery do Maujor Menu Maujor Wind... f"c"|fx"| f)(X 
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Figuro 14.3 - Menu Maujor: estilizaqao no segunda fase. 


Bug no IE7 e anteriores 

Com as novas regras CSS, teoricamente a estilizayao estaria terminada nao fosse 
um hug nos navegadores Internet Explorer 7 e anteriores. Note, na figura 14.2, 
que sc colocou cm destaque, no primeiro cabeyalho, uma difcrenga no espa^a- 
mento da figura de fundo do sinal de mais (+) indicativo de subnivel do menu. 

Note, na linha 17 das regras de estilo mostradas anteriormente,que sc definiu 
um total dc 3px para a coordcnada esquerda da imagcm. O navegador Firetox 
colocou a imagcm a 3px do limite direito da borda esquerda c o navegador In¬ 
ternet Explorer ignorou a borda e colocou a imagcm a 3px do limite csqucrdo do 
menu. Assim, para o IE,e necessario u puxar” a imagem para a direita de um valor 
igual a 5px, resultando em uma coordenada esquerda igual a 3px + 5px = 8px. 
A regra CSS que corrige o hug e mostrada a seguir: 

4 html #menu h3, 4 html #menu h3.corrente { /* IE6 e anteriores 4 / 
background-position:8px center; 

} 

^:first-chi 1 d+html #tnenu h3, 

*:first-child+html #menu h3.corrente { / 4 IE7 4 / 
background-position:8px center; 

} 
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Linha(s) Descri^ao (cont.) 

I.inha 6 Aoclicarumclemcntoh3domenu,alrera-scavisibilidadcdoelemenro 

que sc segue. Veja, na marcagSo HTML, que se rrara de um elemento 
ul que e o container do segundo m'vel para esse cabe^alho. 

Linha 7 lisconde, corn o uso do tnetodo slideUp(),os links do segundo nivel 
que estejam abertos. lsto so rem eleito a partir do segundo clique 
num elemento h3 quando ja existe um submvel aberta 

Linha 8 Insere a classe corrente no cabe^alho clicado, tazendo que a imagern 
de fundo altere do sinal mais (+) para o sinal menos (-). 

Linha 9 Retira a classe corrente do submenu que se fecha.alterando a imagern 

de fundo de um sinal menos (-) para o sinal mais (+). 

Na figura 14.4. mostramos o cfeito final com o primeiro conjunto dc links 
aberto. 


Figura 14.4 - Menu Maujor: efeito final. 
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APENDICE A 

Seletores 


A sintaxc dos sclctorcs prcvistos nas Recomcnda^ocs do W3C para as CSS 1, 
CSS 2.1 e tambem aquclcs constantcs dos esrudos para a futura Recomcndagao 
das CSS 3 fbi usada na cria^ao dos sclctorcs para a biblioteca jQucry. Assim, um 
perfeito entendimento de seletores CSS e indispensavel para o bom desenvolvi- 
mento de scripts jQuery. 

Este apendice contem uma descri<;ao geral dos seletores CSS e sua respectiva 
sintaxe jQuery. Apresenta, ainda, uma tabela na qual sao relacionados os seletores 
CSS 3 e seus alvos na arvore do documento, empregados na biblioteca. 


A.1 Seletortipo 

O seletor e a letra ou string que representa um elemento, na marca^ao HTML, 
conforme mostrado a seguir. 

■ Sintaxe CSS: 

p {...} /* o alvo sao todos os paragrafos no documento V 

h3 {...} /* o alvo sao todos os cabe<;alhos nivel tres no documento */ 

code {...} /* o alvo sao todos os elementos code no documento */ 

■ Sintaxe jQuery: 

S('p') // o alvo sao todos os paragrafos no documento 

$(’h3') // o alvo sao todos os cabe<;alhos nivel tres no documento 

S('code') // o alvo sao todos os elementos code no documento 
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A.2 Seletor identificador unico 

O seletor e o valor do atributo id definido para um elemento, na marca^ao 1ITML, 
conforme mostrado a seguir. 

■ Sintaxe CSS: 

#tudo (...) /* o alvo e elemento com atributo id="tudo" */ 

#principal (...) /* o alvo e elemento com atributo id="principal" */ 

■ Sintaxe jQuery: 

$('#tudo') // o alvo e elemento com atributo id="tudo" 

$('#principal') // o alvo e elemento com atributo id="principal" 


A.3 Seletor dasse 

O seletor e o valor do atributo class definido para um ou mais elementos, na 
marcagao HTML, conforme mostrado a seguir. 

■ Sintaxe CSS: 

.estrutura (...) /* o alvo sao todos os elementos com atributo dass="estrutura" */ 
.cor_um (...) /* o alvo sao todos os elementos com atributo class= M cor_um” */ 

■ Sintaxe jQuery: 

$('.estrutura') // o alvo sao todos os elementos com atributo dass="estrutura" 
$('.cor_um') // o alvo sao todos os elementos com atributo class="cor_um" 

A.3.1 Classifica^ao dosseletores 

Os scletores classificam-sc cm dois grandcs grupos: sclctores simples c sclctorcs 
compostos. 

A.3.1.1 Seletor simples 

Seletor simples c aqucle constituido de um so elemento, podendo ou nao cstar 
associado a uma classe, um id ou uma pseudoclasse. Vcja a seguir exemplos de 
seletores simples. 

■ Sintaxe CSS: 

p, p.um, p#principal 

■ Sintaxe jQuery: 

S(’p'). SCp.um'), $('p#principal') 
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■ Sintaxe jQuery: 

S('p[title] ’) 

$('abbr[clas5="diferente"]') 

$('div[id!="navegacao"]') 

$('hl[classA="est”]') 

S('div[c1ass$="oico"]') 

SCdiv[c1ass*«"ren"]') 

A.3.1.2 Seletorcomposto 

Scletor composco c aquclc constituido pcla combina^ao de dois ou mais sclctores 
simples. A combina^ao entre selctores simples para criar urn scletor composto 
segue unia sintaxe propria c c feita com o cmprcgo de trcs sinais dc combina^ao, 
como descrito na tabela A.l. 


Tabela A.l - Sinais de combinagao 


Sinai de combinagao 

Exemplo ilustrativo 

Nota 

Espago em branco 

div p em 

Obrigatorio usar um ou mais espagos entre seletores 

Sinai de maior *>’ 

div > p ou drv>p 

Espagamento facultativo entre seletores 

Sinai de adig3o *+’ 

p + a ou p+a 

Espagamento facultativo entre seletores 

Sinai til *~" 

hi -p 

Espagamento facultativo entre seletores 


Arvore do documento 

Para urn solido entendimcnto dos selctores compostos, e neccssario conheccr a 
arvore do documento e sua terminologia. Considere a marcagao a seguir: 


<body> 

<div id="topo"> 

<hl>Empresa</hl> 

<ul id="nav"> 

<lixa href="#">Link l</ax/li> 

<lixa href="#">Link 2</ax/li> 

<lixa href="#">Link 3</ax/li> 

</ul> 

</div> 

<div id="principal"> 

<h2>Titulo</h2> 

<p>...pa rag rafo <em>ita1ico</em>...</p> 
<h2>Titulo</h2> 
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A.4 Seletores avan^ados 

Os seletores previstos nos estudos para a implementa^ao das Rccomenda^oes 
do W3C para CSS 3 e que sao usados na biblioteca jQuery sao mostrados na 
tabela A3. 


Tabela A.3 - Seletores CSS 3 


Seletor 

AJvo 

E[artA="val"] 

Casa com qualquer elemento E cujo valor do atributo att come?a com val 

E[art5="val"] 

Casa com qualquer elemento Ecujo valor do atributo att termina com val 

E[att*="vaJ"] 

Casa com qualquer elemento Ecujo valor do atributo att contenha a substring val 

E F:nth-child(n) 

Casa com o elemento Fque seja o n-th (enesimo) filho do elemento E 

E F:first-child 

Casa com os elementos Fque sejam primeiro filho do elemento E 

E F:1ast-chi1d 

Casa com os elementos Fque sejam ultimo filho do elemento E 

E F:only-child 

Casa com os elementos Fque sejam unico filho do elemento E 

E:enabled 

Casa com qualquer elemento E (por exemplo: urn controle de formulirio) que 
esteja habilitado 

E:disabled 

Casa com qualquer elemento E (por exemplo: urn controle de formuterio) que 
esteja desabilitado 

E:checked 

Casa com qualquer elemento E (por exemplo: urn controle de formulario) que 
esteja marcado 

E:not(s) 

Casa com qualquer elemento E que n3o case com o seletor simples s 
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APENDICE B 

Codificagao de 
caracteres para HTML 


Neste apendice mostramos a codificayao de caracteres e simbolos para HTML. As 
tabclas sao constituidas de trcs colunas cada uma. Na primeira coluna e mostrado 
o caractere ou simbolo a ser apresentado, na segunda coluna a enddade nominal 
c na terccira coluna a entidade numerica que o representa. 


Caracteres especiais para HTML 


Y 

&Yulm; 

&#376; 

* 

&circ; 

&#710; 

B 


&#732; 


&ensp; 

&#8194; 

■ 


&#8195; 


ithinsp; 

&#8201; 


&zwnj; 

&#8204; 


&zwj; 

&#8205: 


. 

&rdquo; 

&#8221; 

• 

&bdquo; 

&#8222; 

t 

&dagger; 

&#8224; 

t 

SDagger; 

&#8225; 

%0 

&permil; 

&#8240; 

< 

&lsaquo; 

&#8249; 

> 

Srsaquo. 

&#8250; 

€ 

&euro; 

&#8364; 



&lrm; 

&#8206; 


&rim; 

&#8207; 

- 

&ndash; 

&#8211; 

— 

Smdash; 

&#8212; 

• 

&lsquo; 

&#8216; 

• 

Srsquo; 

&#8217; 


Ssbquo; 

&#8218; 

■ 

Sldquo; 

&#8220; 


■ 

&quot; 

&#34; 

& 

&amp; 

&#38; 

< 

&lt; 


> 

&gt; 

&#62; 

CE 

&OEIig; 


oe 

&oelig; 

&#339; 

§ 

SScaron; 

&#352; 

§ 

Ssoaron; 

&#353; 
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Caracteres matematicos, gregos e si'mbolos para HTML 


/ 

&fnof; 

&#402; 

A 

AAlpha; 

A#913; 

B 

&Beta; 

A#914; 

r 

&Gamma; 

A#915; 

A 

ADelta; 

A#916; 

E 

&Epsilon; 

A#917; 

Z 

&Zeta; 

A#918; 

H 

&Eta; 

&#919; 

0 

&Theta; 

&#920; 

1 

&lota; 

&#921; 

K 

AKappa; 

A#922; 

A 

&Lambda: 

A#923; 

M 

AMu; 

&#924; 

N 

&Nu; 

&#925; 

= 

&Xi; 

&#926; 

0 

AOmicron; 

A#927; 

n 

&Pi; 

A#928; 

p 

ARho; 

A#929; 

i 

ASigma; 

A#931; 

T 

ATau; 

A#932; 

Y 

AUpsilon; 

A#933; 

<P 

APhi: 

A#934; 

X 

&Chi; 

A#935; 

NT 

APsi; 

A#936; 

D 

AOmega; 

A#937; 

a 

&alpha; 

&#945; 

P 

&beta; 

A#946; 

Y 

&gamma; 

A#947; 

6 

&delta; 

&#948: 

e 

Aepsilon; 

&#949; 

C 

&zeta; 

&#950; 


n 

Aeta, 

A#951; 

TM 

&trade; 

A#8482; 

n 

Acap; 

A#8745; 

e 

Atheta; 

&#952; 

X 

Aalefsym; 

A#8501; 

u 

Acup; 

A#8746; 

i &iota; 

&#953; 

- 

Alarr: 

A#8592: 

/ 

Aint; 

A#8747; 

K 

Akappa; 

A#954; 

T 

&uarr; 

A#8593; 

_L 

Aperp; 

A88869; 

A 

&lambda; 

A#955; 

- 

Ararc 

A#8594; 

• 

Asdot; 

A#8901; 

P 

Amu; 

&#956; 

i 

Adarr; 

A#8595; 

r 

Alceil; 

A88968; 

V 

&nu; 

&#957; 

«-♦ 

&harr; 

A#8596; 

i 

Arceil; 

A#8969; 

t, 

&xi; 

&#958; 

j 

Acranr; 

A#8629; 


Athere4; 

A#8756; 

0 

Aomicron; 

A#959; 

<= 

AlAm 

A#8656; 


Asim; 

A#8764; 

TT 

&pi; 

A#960; 

ft 

AuArr; 

A#8657; 

= 

Acong; 

A#8773; 

P 

Arho; 

A#961; 

=> 

ArArr; 

A#8658; 

% 

Aasymp; 

A88776; 

? 

Asigmaf; 

&#962; 

ft 

AdArr; 

A#8659: 

* 

Ane; 

A#8800; 

a 

Asigma; 

A#963; 

•o 

AhArr; 

A#8660; 

= 

Aequiv; 

A#8801; 

T 

&tau; 

A#964; 

V 

&forall; 

A#8704; 

s 

Ale; 

A88804; 

u 

&upsilon; 

&#965; 

a 

Apart; 

A#8706; 

s 

Age; 

A#8805; 

<P 

&phi; 

&#966; 

3 

Aexist; 

A#8707; 

c 

Asub; 

A#8834; 

X 

Achi; 

&#967; 

0 

Aempty; 

A#8709; 

3 

Asup; 

A#8835; 

Y 

Apsi; 

A#968; 

V 

Anabla; 

A#8711; 

<z 

Ansub; 

A#8836; 

U) 

Aomega; 

A#969; 

6 

Aisin; 

A#8712; 

c 

Asube; 

mm; 

9 

&thetasym; 

&#977; 

e 

Anotin; 

A#8713; 

2 

Asupe; 

A88839; 

r 

&upsih; 

&#978; 

3 

Ani; 

A#8715; 

© 

Aoplus; 

A88853; 

ID 

&piv; 

A#982; 

n 

Aprod; 

A#8719; 


Aotimes: 

A08855; 

■ 

&bull: 

&#8226; 

i 

Asum; 

A#8721; 

L 

Alfloor; 

A#8970; 

... 

&hellip; 

A#8230; 

- 

Aminus; 

A#8722; 

J 

Arfloor 

A#8971; 

’ Aprime; 

&#8242; 

• 

Alowast; 

A#8727; 

< 

Alang; 

A#9001; 

■ 

&Prime: 

A#8243; 

V 

Aradic; 

A#8730; 

> 

Arang: 

A#9002; 


&oline; 

&#8254; 

X 

Aprop; 

A#8733; 

0 

Aloz; 

A#9674; 

/ 

Afrasl; 

A#8260; 

oo 

Ainfin; 

A#8734; 

♦ 

Aspades; 

A#9824; 

P 

Aweierp; 

A#8472; 

z 

Aang; 

A#8736; 

* 

Aclubs; 

A#9827; 

3 

Aimage; 

A#8465; 

A 

Aand; 

A#8743; 

V 

Ahearts; 

A#9829; 

9? 

Areal; 

A#8476; 

V 

Aor; 

A#8744; 

♦ 

Adiams; 

A#9830; 
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Caracteres para HTML - ISO-8859-1 


, Scedil; 

&# 184; 

1 Ssupl; 

&#185; 

0 &ordm; 

&#186; 

» &raquo; 

&#187; 

V* &frac14; 

&#188; 

% &frac12; 

&#189; 

% &frac34; 

&#190; 

l Siquest; 

&#191; 

A SAgrave; 

&#192; 

A SAacute: 

&#193; 

A SAcirc; 

&#194; 

A &Atilde; 

&#195; 

A SAuml; 

&#196; 

A SAring; 

&#197; 

7E SAEIig; 

&#198; 

Q &Ccedil; 

&#199; 

£ SEgrave; 

&#200; 

£ SEacute; 

&#201; 

£ SEcirc; 

&#202; 

£ SEulm; 

&#203; 

i &lgrave; 

&#204: 

I &l acute; 

&#205; 

1 &lrirc; 

&#206; 

I Slulm; 

&#207; 


Snbsp; 

&#160; 

j &iexd; 

4#161; 

d Scent; 

&#162; 

£ Spound; 

&#163; 

d Scurren; 

&#164; 

¥ Syen; 

&#165; 

! Sbrvbar; 

&#166; 

§ Ssect; 

&#167; 

Suml; 

&#168; 

© Scopy; 

&#169; 

* Sordf; 

&#170; 

« Slaquo; 

4#171; 

■> Snot; 

&#172; 

Sshy; 

&#173: 

® Sreg; 

&#174; 

Smacr; 

&#175: 

° &deg; 

&#176; 

± Splusmn; 

&#177; 

* &sup2; 

&#178; 

* &sup3; 

&#179; 

Sacute; 

&#180; 

u Smicro; 


U Spara; 

&#182; 

■ Smiddot; 

&#183; 


D &ETH; 

&#208; 

N SNtikJe; 

&#209; 

0 SOgrave; 

&#210; 

(!) SOacute; 

&#211; 

0 SOcirc; 

&#212; 

0 SOtilde; 

&#213; 

0 SOulm; 

&#214; 

* Stimes; 

&#215; 

0 SOslash; 

&#216; 

0 SUgrave; 

&#217; 

U SUacute; 

&#218; 

0 SUcirc; 

&#219; 

0 &Uulm; 

&#220; 

Y SYacute; 

&#221; 

&THORN; 

&#222; 

li Sszlig; 

&#223; 

a Sagrave; 

&#224; 

a Saacute 

&#225; 

a Sacirc; 

&#226; 

a Satilde; 

&#227; 

a Saulm; 

&#228; 

a Saring; 

&#229; 

as Saerlig; 

&#230; 

? Sccedil; 

&#231; 


e 

Segrave; 

&#232: 

6 

Seacute; 

&#233; 

6 

Secirc; 

&#234; 

e 

Seulm; 

&#235; 

i 

Sigrave; 

&#236; 

i 

Siacute; 

&#237; 

i 

Sicirc; 

&#238; 

1 

Siulm; 

&#239; 

fi 

Seth; 

&#240; 

* 

&ntilde; 

&#241; | 

6 

Sograve: 

&#242; 

6 

Soacute; 

&#243; 

6 

Socirc; 

&#244; 

6 

Sotilde; 

&#245; 

6 

Soulm; 

&#246; 

T 

Sdevide; 

&#247; 

0 

Soslash; 

&#248; 

U 

Sugrave; 

&#249; 

u 

Suacute; 

&#250; 

0 

Sucirc; 

&#251; 

u 

&uulm; 

&#252; 

y 

Syacute; 

&#253; 


Sthom; 

&#254; 


Syulm; 

&#255: 
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APENDICE C 

Elementos HTML 


Esta tabcla foi cxtraida do site do W3C c relaciona os elementos HTML. Fornccc 
ainda informa^oes sobre as tags dc aberrura c fechamento, elementos vazios, 
elementos cm desuso c DTD a que sc aplicam, alcm dc uma breve dcscri^ao do 
elemento. 


Nas colunas da tabela c adotada uma nota^ao, ou legenda, para indicar restri- 
£oes quando ao uso ou emprego do documento, como mostrado a seguir: 


Notapao Significado 

0 

Uso opcional 

P 

Uso proibido 

D 

Elemento em desuso 

V 

Elemento vazio 

L 

DTD Loose 

F 

DTD Frameset 


Elemento 

Tag de Tag de 

abertura fechamento 

Vazio 

Desuso 

DTD 

Descriqao 

A 





ancora 

ABBR 





abreviaturas (p.ex: WWW, HTTP etc.) 

ACRONYM 






ADDRESS 






APPLET 



D 

L 

Java applet 

AREA 

P 

V 




B 





estilo negrito 
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Elemento 

Tag de Tag de 

abertura fechamento 

Vazio 

Desuso 

DTD 

Descrigao 

BASE 

P 

V 



URI base para o documento 

BASEFONT 

P 

V 

D 

L 

tamanho base para fonte 

BDO 





118N BiDi over-ride 

BIG 





aumenta tamanho de fonte 

BLOCKQUOTE 





bloco de citagao 

BODY 

0 0 




segao corpo do documento 

BR 

P 

V 



quebra de linha 

BUTTON 





botao 

CAPTION 





tltulo de tabela 

CENTER 



D 

L 

omesmoqueDIV align=center 

CITE 





citagao 

CODE 





fragmento de codigo de computador 

COL 

P 

V 



coluna de tabela 

COLGROUP 

0 




grupo de colunas de tabela 

DD 

0 




item de lista de definigSo 

DEL 





texto apagado 

DFN 





instancia de definigao 

DIR 



D 

L 

lista de diretorios 

DIV 





container generico, nivel de bloco 

DL 





lista de definigao 

DT 

0 




termo de lista de definigao 

EH 





enfase 

FIELDSET 





grupo de controles de formulArio 

FONT 



D 

L 

altera estilo da fonte 

FORM 





formulario interatrvo 

FRAME 

P 

V 


F 

janela secundaria 

FRAMESET 




F 

subdivisao de janelas 

HI 





tltulo 

H2 





titulo 

H3 





titulo 

H4 





tltulo 

H5 





heading 
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APENDICE D 

Atributos HTML 


Esta tabcla foi extraida do site do W3C c relaciona os atributos HTML. Relaciona 
os elementos HTML aos quais sc aplica cada um dos atributos c fornccc infor- 
ma^ocs sobre o tipo do atributo, a obrigatoriedade dc uso, atributos cm desuso 
e DTD a que se aplicam, alem de um breve comentario sobre o atributo. 

Nas colunas da tabcla c adotada uma nota^ao, ou legenda, para indicar rcstri- 
£oes quando ao uso ou emprego do documento, como ntostrado a seguir: 


Notagao 

Significado 

0 

Uso obngatbrio no 
elemento a que se aplica 

D 

Atributo em desuso 

L 

DTD Loose 

F 

DTD Framest 


Atributo 

Elementos a que 
se aplica 

Tipo 

Uso 

Desuso DTD 

Comentario 

abbr 

TD.TH 

%Text; 




abreviatura para texto da 
celula cabegalho 

accept-charset 

FORM 

%Char$ets; 




lista de caracteres suportados 

accept 

FORM. INPUT 

%ContentTypes; 




lista de tipos MIME para 
upload de arqurvos 

accesskey 

A, AREA, 

BUTTON, INPUT, 
LABEL, LEGEND, 
TEXTAREA 

%Character; 




caractere para acesso por 
tedado 

action 

FORM 

%URI; 

0 



local de processamento de 
formulano no sen/idor 

align 

CAPTION 

%CAIign; 


D 

L 

alinhamento para titulo de 
tabela 
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Atributo 

Elementos a que 

se aplica Ti P° 

Uso Desuso DTD 

Comentario 

align 

APPLET. IFRAME. 
IMG. INPUT, 
OBJECT 

%IAIign; 


D 

L 

alinhamento vertical ou 
horizontal 

align 

LEGEND 

%LAIign; 


D 

L 

alinhamento de legenda de 
fieldset 

align 

TABLE 

%TAIign; 


D 

L 

alinhamento de tabela na 
janela 

align 

HR 

(left | center | 
right) 


D 

L 


align 

DIV, HI, H2, H3, 

H4. H5, H6. P 

(left | center | right 

1 justify) 


D 

L 

alinhamento de texto 

align 

COL. COLGROUP, 
TBODY, TD. 

TFOOT, TH. 

THEAD. TR 

(left | center | right 
| justify | char) 





alink 

BODY 

%Color; 


D 

L 

cor do link selecionado 

alt 

APPLET 

%Text; 


D 

L 

breve descrigao 

alt 

AREA, IMG 

%Text; 

0 



breve descri^o 

alt 

INPUT 

CDATA 




breve descrigSo 

archive 

APPLET 

CDATA 


D 

L 

lista de arquivos separados 
por virgula 

archive 

OBJECT 

CDATA 




lista de URIs separados por 
espago 

axis 

TD, TH 

CDATA 




lista de cabecalhos 
relacionados separados por 
virgula 

background 

BODY 

%URI; 


D 

L 

textura que se repete no 
fundo do documento 

bgcolor 

TABLE 

%Color; 


D 

L 

cor de fundo para tabela 

bgcolor 

TR 

%Color; 


D 

L 

cor de fundo para linhas 

bgcolor 

TD, TH 

%Color; 


D 

L 

cor de fundo para celula 

bgcolor 

BODY 

%Color; 


D 

L 

cor de fundo para o 
documento 

border 

TABLE 

%Pixels; 




espessura da borda em 
redor de tabela 

border 

IMG. OBJECT 

%Pixels; 


D 

L 

espessura da borda em link 

cellpadding 

TABLE 

%Length; 




espagamento entre celulas 

cellspacing 

TABLE 

%Length; 




espagamento entre c6lulas 

char 

COL, COLGROUP, 
TBODY. TD. 

TFOOT, TH, 

THEAD,TR 

%Character; 




caractere de alinhamento, 
p.ex: char=':’ 

charoff 

COL. COLGROUP. 
TBODY. TD, 

TFOOT. TH, 

THEAD,TR 

%Length; 




offset para caractere de 
alinhamento 
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Atributo 

Elementos a que 

se aplica Ti P° 

Uso Desuso DTD 

Comentario 

charset 

A, LINK, SCRIPT 

%Charset; 




codificapao de caratere do 
destino de link 

checked 

INPUT 

(checked) 




marcar por padrao botoes 
radio e check boxes 

cite 

BLOCKQUOTE. Q 

%URI; 




URI para o documento de 
destino ou mensagem 

cite 

DEL. INS 

%URI; 




informapoes sobre as 
razoes de mudanpa 

class 

todos os elementos. 
exceto BASE, 
BASEFONT, HEAD, 
HTML, META. 
PARAM, SCRIPT, 
STYLE, TITLE 

CDATA 




lista de classes separadas 
por espapo 

classid 

OBJECT 

%URI; 




identifica uma 
implementapao 

clear 

BR 

(left | all | right | 
none) 


D 

L 

controla o fluxo do texto 

code 

APPLET 

CDATA 


D 

L 

classe do arquivo para o 
elemento applet 

codebase 

OBJECT 

%URI; 




URI base para classid. data, 
arquivo 

codebase 

APPLET 

%URI; 


D 

L 

URI base optional para 
applet 

codetype 

OBJECT 

%ContentType; 




tipo de conteudo para o 
cddigo 

color 

BASEFONT. FONT 

%Color; 


D 

L 

cor do texto 

cols 

FRAMESET 

%MultiLengths; 



F 

lista de quantidade de 
colunas, padrao: 100% (1 
coluna) 

cols 

TEXTAREA 

NUMERO 

0 




colspan 

TD.TH 

NUMERO 




niimero de colunas 
transformadas em uma 
celula 

compact 

DIR. DL, MENU. 
OL.UL 

(compacto) 


D 

L 

redupao de espapamento 

content 

META 

CDATA 

0 



informapao associada 

coords 

AREA 

%Coords; 




lista de coordenadas 
separadas por virgula 

coords 

A 

%Coords; 




para uso em mapa de 
imagens no lado do cliente 

data 

OBJECT 

%URI; 




dados do objeto 

datetime 

DEL, INS 

%Datetime; 




data-hora da modificapao 

declare 

OBJECT 

(declare) 




declara flag para objeto 

defer 

SCRIPT 

(defer) 




UA pausam a initializapao 
do script 
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Atributo 

Elementos a que 

se aplica Ti P° 

Uso Desuso DTD 

Comentario 

dir 

todos os etemenlos, 
exceto APPLET, 
BASE. BASEFONT, 
BDO, BR, FRAME, 
FRAMESET, 
IFRAME, PARAM, 
SCRIPT 

(Itr | rtl) 




direpao do texto 

dir 

BDO 

(Itr | rtl) 

0 



direpao 

disabled 

BUTTON, INPUT, 
OPTGROUP, 
OPTION, SELECT, 
TEXTAREA 

(disabled) 




desabilitado 

enctype 

FORM 

%ContentType; 





face 

BASEFONT. FONT 

CDATA 


D 

L 

lista de nomes de fontes 
separados por virgula. 

for 

LABEL 

IDREF 




casa com ID de controie 

frame 

TABLE 

%TFrame; 




parte do frame a renderizar 

frameborder 

FRAME, IFRAME 

(110) 



F 

existencia de bordas em 
frames 

headers 

TD, TH 

IDREFS 




lista de id's para c^lulas 
cabepalho 

height 

IFRAME 

%Length; 



L 

altura 

height 

TD, TH 

%Length; 


D 

L 

altura 

height 

IMG. OBJECT 

%Length; 




altura 

height 

APPLET 

%Length; 

0 

D 

L 

altura inicial 

href 

A, AREA, LINK 

%URI; 




URI para documento 
relacionado 

href 

BASE 

%URI; 




URI que atua como URI 
base 

hreflang 

A, LINK 

%LanguageCode; 




cddigo de idioma 

hspace 

APPLET, IMG, 
OBJECT 

%Pixels; 


D 

L 

espapamento horizontal 

http-equiv 

META 

NAME 




nome de cabepalho HTTP 

id 

todos os elementos, 
exceto BASE, 

HEAD, HTML, 

META, SCRIPT. 
STYLE, TITLE 

ID 




identificador unico 

ismap 

IMG. INPUT 

(ismap) 




mapa de imagem no lado 
do servidor 

label 

OPTION 

%Text; 




para uso em menus 
hierdrquicos 

label 

OPTGROUP 

%Text; 

0 



para uso em menus 
hierdrquicos 
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Atributo 

Elementos a que 

se aplica Ti P° 

Uso Desuso DTD 

Comentario 

lang 

todos os etemenlos, 
exceto APPLET, 
BASE. BASEFONT, 
BR, FRAME. 
FRAMESET, 
IFRAME, PARAM, 
SCRIPT 

%LanguageCode; 




codigo de idioma 

language 

SCRIPT 

CDATA 


D 

L 

linguagem do script 

link 

BODY 

%Color; 


D 

L 

cor de links 

longdesc 

IMG 

%URI; 




link para descrigSo longa 

longdesc 

FRAME, IFRAME 

%URI; 



F 

link para descrigao longa 

marginheight 

FRAME, IFRAME 

%Pixels; 



F 

altura da margem (em pixel) 

marginwidth 

FRAME, IFRAME 

%Pixels; 



F 

largura de margem (em 
pixel) 

maxlength 

INPUT 

N0MERO 




niimero m^ximo de 
caracteres em campos de 
texto 

media 

STYLE 

%MediaDesc; 




especifica a midia a que se 
aplica 

media 

LINK 

%MediaDesc; 




especifica a midia a que se 
aplica 

method 

FORM 

(GET | POST) 




m&odo HTTP de envio de 
formulario 

multiple 

SELECT 

(multiple) 




padrao e seie?ao simples 

name 

BUTTON, 

TEXTAREA 

CDATA 





name 

APPLET 

CDATA 


D 

L 

permite identificagao entre 
applets 

name 

SELECT 

CDATA 




nome de campo 

name 

FORM 

CDATA 




nome de formulario 

name 

FRAME, IFRAME 

CDATA 



F 

nome do frame de destino 

name 

IMG 

CDATA 




nome de imagem 

name 

A 

CDATA 




nome de link destino 

name 

INPUT. OBJECT 

CDATA 




enviado com os dados do 
formulario 

name 

MAP 

CDATA 

0 



para referenciar a urn mapa 

name 

PARAM 

CDATA 

0 



nome de propriedade 

name 

META 

NAME 




nome de metainforma$ao 

nohref 

AREA 

(nohref) 




regiao sem fun$ao 

noresize 

FRAME 

(noresize) 



F 

permissao para 
redimensionamento de 
frames 
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Atributo 

Elementos a que 
se aplica 

Tipo 

Uso 

Desuso 

DTD 

Comentario 

onkeyup 

todos os elementos, 
exceto APPLET, 
BASE. BASEFONT, 
BDO, BR, 

FONT. FRAME. 
FRAMESET. HEAD. 
HTML, IFRAME. 
ISINDEX, META, 
PARAM, SCRIPT, 
STYLE, TITLE 

%Script; 




uma tecla e solta 

onload 

FRAMESET 

%Script; 



F 

todos os frames foram 
carregados 

onload 

BODY 

%Script; 




o documento foi carregado 

onmousedown 

todos os elementos. 
exceto APPLET. 
BASE, BASEFONT, 
BDO. BR, 

FONT, FRAME. 
FRAMESET, HEAD, 
HTML, IFRAME, 
ISINDEX, META, 
PARAM, SCRIPT, 
STYLE, TITLE 

%Script; 




botao do dispositive 
apontador e acionado 

onmousemove 

todos os elementos, 
exceto APPLET, 
BASE, BASEFONT, 
BDO, BR, 

FONT, FRAME. 
FRAMESET, HEAD. 
HTML, IFRAME. 
ISINDEX, META, 
PARAM, SCRIPT, 
STYLE, TITLE 

%Script; 




apontador movido sobre o 
elemento 

onmouseout 

todos os elementos, 
exceto APPLET, 
BASE. BASEFONT, 
BDO, BR, 

FONT, FRAME. 
FRAMESET. HEAD, 
HTML, IFRAME, 
ISINDEX. META, 
PARAM, SCRIPT, 
STYLE. TITLE 

%Script; 




apontador movido para fora 
do elemento 

onmouseover 

todos os elementos, 
exceto APPLET, 
BASE, BASEFONT, 
BDO. BR, 

FONT, FRAME, 
FRAMESET, HEAD, 
HTML, IFRAME, 
ISINDEX. META, 
PARAM, SCRIPT, 
STYLE, TITLE 

%Script; 




apontador movido para o 
elemento 
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Atributo 

Elementos a que 

se aplica Ti P° 

Uso Desuso DTD 

Comentario 

onmouseup 

todos os elementos, 
exceto APPLET, 
BASE. BASEFONT, 
BDO, BR, 

FONT. FRAME. 
FRAMESET. HEAD. 
HTML, IFRAME. 
ISINDEX, META, 
PARAM, SCRIPT, 
STYLE, TITLE 

%Script; 




apontador solto 

onreset 

FORM 

%Script; 




formulario foi limpo 

onselect 

INPUT, TEXTAREA 

%Script; 




urn texto foi selecionado 

onsubmit 

FORM 

%Script; 




formulario foi enviado 

onunload 

FRAMESET 

%Script; 



F 

todos os frames foram 
removidos 

onunload 

BODY 

%Script; 




o documento foi removido 

profile 

HEAD 

%URI; 




informa^ao de perfil 

prompt 

ISINDEX 

%Text; 


D 

L 

mensagem 

readonly 

TEXTAREA 

(readonly) 





readonly 

INPUT 

(readonly) 




somente leitura, para texto 
e senha 

rel 

A, LINK 

%LinkTypes; 




links relacionais 

rev 

A, LINK 

%LinkTypes; 




links reversos 

rows 

FRAMESET 

%MultiLengths; 



F 

lista de quantidades, 
padrao: 1G0 3 , C (1 linha) 

rows 

TEXTAREA 

NUMERO 

0 




rowspan 

TD.TH 

NUMERO 




numero de linhas 
transformadas em uma 
c£lula 

rules 

TABLE 

%TRules; 




fios entre linhas e colunas 

scheme 

META 

CDATA 




sele^ao de conteudos 

scope 

TD, TH 

%Scope; 




escopo para as celulas de 
cabe^alho 

scrolling 

FRAME, IFRAME 

(yes | no | auto) 



F 

existencia de barra de 
rolagem 

selected 

OPTION 

(selected) 





shape 

AREA 

%Shape; 




controle de interpretapao 
por coordenadas 

shape 

A 

%Shape; 




para uso em mapa de 
imagem do lado do cliente 

size 

HR 

%Pixels; 


D 

L 


size 

FONT 

CDATA 


D 

L 

[+|-]n c . p.ex:. size=”+r, 
size='4" 
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Atributo 

Elementos a que 

se aplica Ti P° 

Uso Desuso DTD 

Comentario 

size 

INPUT 

CDATA 




especifico para cada tipo 
de campo 

size 

BASEFONT 

CDATA 

0 

D 

L 

fonte base para o elemento 
FONT 

size 

SELECT 

NUMERO 




numero de linhas visiveis 

span 

COL 

NUMERO 




atributo COL afetado por N 
colunas 

span 

COLGROUP 

NUMERO 




numero padrao de colunas 
nogrupo 

src 

SCRIPT 

%URI; 




URI para script extemo 

src 

INPUT 

%URI; 




para campos com imagens 

src 

FRAME, IFRAME 

%URI; 


F 


enderego do conteiido do 
frame 

src 

IMG 

%URI; 

0 



URI da imagem a incorporar 

standby 

OBJECT 

%Text; 




mensagem a mostrar 
enquanto carrega 

start 

OL 

NUMERO 


D 

L 

numero inicial da sequSncia 

style 

todos os elementos, 
exceto BASE, 
BASEFONT, HEAD, 
HTML, META, 
PARAM, SCRIPT, 
STYLE, TITLE 

%StyleSheet; 




informagao sobre 
estilizagao 

summary 

TABLE 

%Text; 




propbsito/estrutura para 
saida de sintetizador 

tabindex 

A, AREA, 

BUTTON, INPUT, 
OBJECT, SELECT, 
TEXTAREA 

NUMERO 




posigao na ordem de 
tabulagao 

target 

A, AREA, BASE, 
FORM. LINK 

%FrameTarget: 



L 

frame onde sera 
renderizado 

text 

BODY 

%Color; 


D 

L 

cor dos textos no 
documento 

title 

todos os elementos, 
exceto BASE, 
BASEFONT HEAD, 
HTML, META. 
PARAM, SCRIPT, 
TITLE 

%Text; 




titulo para o elemento 

type 

A, LINK 

%ContentType; 




tipo de conteudo do 
elemento 

type 

OBJECT 

%ContentType; 




tipo de conteudo para 
dados 

type 

PARAM 

%ContentType; 




tipo de conteudo para valor, 
quando valuetype = ref 

type 

SCRIPT 

%ContentType; 

0 



tipo de conteudo da 
linguagem do script 

type 

STYLE 

%ContentType; 

0 



tipo de conteudo da 
linguagem de estilos 
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Atributo 

Elementos a que 
se aplica 

Tipo 

Uso 

Desuso 

DTD 

Comentario 

type 

INPUT 

%lnputType; 

TEXT 



tipo do controle input 

type 

Ll 

%UStyte; 


D 

L 

estilo do item de lista 

type 

OL 

%OLStyte; 


D 

L 

estilo numerico 

type 

UL 

%ULStyle; 


D 

L 

estilo marcador 

type 

BUTTON 

(button | submit | 
reset) 

submit 



para uso em botoes de 
formulSrio 

usemap 

IMG. INPUT, 
OBJECT 

%URI; 




usado em mapa de imagem 
no lado do cliente 

valign 

COL. COLGROUP. 
TBODY, TD, 

TFOOT. TH, 

THEAD, TR 

(top | middle | 
bottom | baseline) 




alinhamento vertical em 
celulas 

value 

INPUT 

CDATA 




para botao radio e 
checkboxes 

value 

OPTION 

CDATA 




valor padrao para escolha 

value 

PARAM 

CDATA 




valor da propriedade 

value 

BUTTON 

CDATA 




enviado ao servidor 

value 

LI 

NUMERO 


D 

L 

limpa sequencia 

valuetype 

PARAM 

(DATA |REF| 
OBJECT) 

DATA 



tipo de valor 

version 

— 

HTML 

CDATA 

%HTML. 

Version; 

D 

L 

constante 

vlink 

BODY 

%Color; 


D 

L 

cor de link visitado 

vspace 

APPLET, IMG, 
OBJECT 

%Pixels; 


D 

L 

espagamento vertical 

width 

HR 

%Length; 


D 

L 


width 

IFRAME 

%Lengih; 



L 

largura de frame 

width 

IMG. OBJECT 

%Length; 




largura do elemento 

width 

TABLE 

%Length; 




largura do elemento 

width 

TD, TH 

%Length; 


D 

L 

largura do elemento 

width 

APPLET 

%Length; 

0 

D 

L 

largura inicial do elemento 

width 

COL 

%MultiLength; 




largura do elemento 

width 

COLGROUP 

%MultiLength; 




largura do elemento 

width 

PRE 

NUMERO 


D 

L 

largura do elemento 
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APENDICE E 

FAQ jQuery 


Estc apendicc e uma cxtcnsao da FAQ contida no site oficial da biblioteca jQuery. 
Alguns scripts que demonstram as respostas cstao dispomveis no site do livro, 
no arquivo-apA.l.html. 


Como selecionar um elemento usando seu atributo id? 

Lembre-se de que o atributo id e um identificador unico para um elemento, ou 
seja, somente um elemento, no documento, podcra corner o atributo id com um 
determinado valor, fi claro que sao admitidos varios ids, cada um com seu valor, 
cm instancias diferentes, no mesmo documento. Assitn, a sek\ao usando o atri¬ 
buto id rctornara um c somente um elemento. 

Para selecionar um elemento ao qual se tenha atribufdo o identificador id com 
valor idNome, use a sintaxe mostrada a seguir: 

$('#idNome') 

Como selecionar um elemento usando seu atributo class? 

O atributo class, ao contrario do atributo id, pode ser usado quantas vezes forem 
necessarias em um mesmo elemento ou cm elementos diferentes dentro dc um 
documento. 

Para selecionar os elementos aos quais sc tenha atribufdo o identificador class 
com valor classeNome , use a sintaxe mostrada a seguir: 

SC .classeNome') 
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Um objeto selecionado via jQuery pode ser atribuido a uma variavel JavaScript? 

Sim,vocepodeatribuira uma variavel JavaScript um objeto jQuery e manipula-lo 
normalmente com sintaxe jQuery, como mostrado no exemplo a seguir: 

var meuOiv = S('#divNoine'); 

var meuValor = SC'IdivNome'J.vaH); // Armazena o valor do elemento 
meuDiv.val(’Ola mundo'); // Define o valor do elemento 

Como verificar se existe um determinado elemento no documento? 

Use a propriedade length para proceder a verificav'ao como mostrado a seguir: 

$(’p').1ength(); // Retorna o numero de paragrafos encontrados no documento 

Lembre-se de que o uso de jQuery dispensa verificar a existencia de um de¬ 
terminado objeto antes de aplicar-lhc um metodo. Observe o exemplo a seguir: 

if ($('P')-length()) // Verifica a existencia de paragrafos 
$('p').hide(); // Esconde os paragrafos caso existam 

O teste condicional para verificar a existencia de paragrafos e dispensavel. 
Basta declarar-se $(’p').hide() e, caso nao existam paragrafos no documento, a 
instru<;ao sera ignorada sem gerar um erro. 

Como verificar o estado de visibilidade de um determinado elemento no documento? 

Para verificar o estado de visibilidade de um elemento, use os seletores :visible 
e :hidden. 

Observe o exemplo a seguir: 

var estadoVisivel = S(’#idNome’).is(':visible'); 
var estadolnvisivel = SCtfidNome’J.isC : hi dden ’); 

Para aplicar um metodo em um elemento baseado na sua visibilidade, use a 
sintaxe mostrada a seguir: 

$('#idNome:visible , ).css( , color', 'red'); 

$('#idNome:hidden' ).showQ .animate({left:'+=200px'}, 'slow'); 


Como selecionar elementos cujo valor do id contenha caracteres especiais ? 

Alguns frameworks geram valores para o atributo id contendo caracteres espe¬ 
ciais, tais como colchetes ([..]) e ponto (.). Por exemplo: <div id="id.No/ne"> ou <div 
id=" id[Nomer> 
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Em tais casos, voce precisa usar uma sintaxc especial como a mostrada a 
scguir: 

$('#id.Nome') // Nao funciona 

$(’#id\\.Nome’) // Funciona! 

S('#id[Nome]') // Nao funciona 

$('#id\\[Nome\\]') // Funciona! 

Como fa^o para habilitar e desabilitar um elemento? 

Uni elemento esta desabilitado quando contem o atributo disabled com o valor 
di sabled. Assim, para desabilitar um elemento, basta remover esse atributo c, para 
habilita-lo, voce deve configurar o atributo. O script e mostrado a seguir: 

$(’#xpto').attr(’disabled', 'disabled'); // Desabilita o elemento cujo id tem o valor xpto 
$('#xpto').removeAttr('disabled'); // Habilita o elemento cujo id tem o valor xpto 

Desenvolva uma pagina, para demonstrar o funcionamento do script mos¬ 
trado, com a seguinte marca^ao HTML. Nao se esque^a de linkar a pagina a 
biblioteca. 

<select id="xpto" style="width:200px”> 

<option>0pgao um</option> 

<option>0pgao dois</option> 

</select> 

cinput type="button" value="Desabilitar" onclick="$(’#xpto').attr('disabled', 
'disabled')" /> 

cinput type="button" value="Habilitar" onclick="$('#xpto').removeAttr('disabled')" /> 

Como fa^o para marcar e desmarcar um elemento input? 

Um elemento esta marcado quando contcm o atributo checked com o valor checked. 
Assim, para marcar um elemento, basta remover esse atributo e, para dcsmarca-lo, 
voce deve configurar o atributo. O script e mostrado a seguir: 

$('#ypto').attr(’checked', 'checked'); // Marca o elemento cujo id tem o valor ypto 
$('#ypto').attr('checked', ' '); // Desmarca o elemento cujo id tem o valor ypto 

Desenvolva uma pagina, para demonstrar o funcionamento do script mos¬ 
trado, com a seguinte marca^ao HTML. Nao se esque^a de linkar a pagina a 
biblioteca. 

clabelxinput type="checkbox" id="ypto" />Marca/Desmarca</label> 

cinput type="button" value="Marcar" onclick="$('#ypto').attr('checked', 'checked')’’ /> 

cinput type="button" value="Desmarcar" one!ick="S('#ypto').attr('checked', ")" /> 
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Na sintaxc S('ypto') .attr('checked', ”), nao use espago cm branco no 
valor do atributo ao declara-lo vazio. Essa sintaxe equivalc a S('ypto'). 
removeAttr('checked. 


Como obter o valor textual da op^ao selecionada em um elemento select? 

Elementos option dc um select possuem dois valores distintos: o valor do atributo 
value e o valor textual do elemento. Desenvolva uma pagina, para demonstrar o 
funcionamento do script mostrado, com a seguinte marcagao HTML. Nao se 
esquega de linkara pagina a biblioteca. 

<select id="meuSelect" style="width:200px"> 

<option value="fruta_um">Abacate</option> 

<option value="fruta_dois">Abacaxi</option> 

<option value="fruta_tres">Banana </option> 

<option value="fruta_quat ro">Figo</option> 

<option value="fruta_cinco">Goiaba</option> 

<option value="fruta_seis">Laranja</option> 

</select> 

<input type="button" value="Valor" onclick="alert(S('#meuSelect').valO)'' /> 

<input type="button" value="Texto" onclick» M alert($(’#meuSelect option:selected'). 
textO)" /> 

Como substituir o texto do terceiro elemento de um conjunto de seis elementos? 

Tanto o seletor :eq() como o metodo eq() permitem fazer a selegao. Desenvolva 
uma pagina, para demonstrar o funcionamento do script, com a seguinte mar¬ 
cagao HTML. Nao se esquega de linkar a pagina a biblioteca. 

► HTML: 

<ol id="minhaLista"> 

<li>texto do primeiro item</li> 

<li>texto do segundo item</li> 

<li>texto do terceiro item</li> 

<li>texto do quarto item</li> 

<li>texto do quinto item</li> 

<li>texto do sexto item</li> 

</ol> 

► jQuery: 

// Nao funciona 

$('#nrinhaLista').find('li').eq(2).text().replace('texto do terceiro item','TEXTO ALTERADO'); 
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// Funciona 

var SelementoTres = S('#minhaLista*).findC'li’).eqC2); 

var textoElementoTres = SelementoTres.text().replace('texto do terceiro item', 
'TEXTO ALTERADO'); 

SelementoTres.text(textoElementoTres).css('col or', 'red'); 

O primeiro script mostrado nao funciona porque o objeto retornado na cadeia 
c o texto substituto para o terceiro elemento. Isto porque replaceO c um metodo 
JavaScript de manipulagSo de strings e nao um metodo jQuery. Observe, no 
segundo script, que se armazenou o texto substituto em uma variavel denomi- 
nada textoElementoTres e com o uso do metodo text('texto a inserir') se efetuou 
a substitui^ao do texto. 

Por que a anima^ao de um elemento faz que se comporte como elemento nivel de bloco? 

Ao se aplicar um efeito de anima^ao que altere as propriedades CSS height e/ou 
width, tais como os efeitos show, hide, slideUp ou slideDown, o objeto animado, 
durante o curso da anima^ao, tern sua propriedade CSS display configurada para 
block, porque height e width sao propriedades aplicavcis a clemcntos nivel de blo¬ 
co. Ao tcrmino da animagao, a propriedade display e configurada para seu valor 
original. 

Desenvolva uma pagina, para visualizar esse com portamento, animando um 
elemento in-line como mostrado na marcagao HTML a seguir. 


<style type="text/css" media*"aH"> 
em {background:#ff6;} 

</style> 

<script type="text/javascript" src=". ./jquery-1.2.6.js"x/script> 
<script type="text/javascript"> 

S(document).ready(function0 { 

$('em').click(functionO { 

S(this).hide(3000); 

}); 

}); 

</script> 

</head> 

<body> 

<em>Lorem ipsum dolor</em> 

</body> 

</html> 
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Qual e a diferen^a entre appendO e appendToO? 

Estes dois metodos destinam-se a inserir conteudos dentro de um elemento 
HTML. A insert no sera imediatamente antes da tag de fechamento do elemento 
c o conteudo a scr inserido podc scr uma string, um trccho de marca^ao HTML 
ou um objcto jQuery retirado do proprio documcnto. 

A unica diferen^a entre os dois metodos e a sintaxe, como mostrado a seguir: 

$('p').append('<b>texto negrito</b>'); 

$('<b>texto negrito</b>').appendTo('p’); 

Qual e a diferen^a entre prependo e prependToO? 

Estes dois metodos destinam-se a inserir conteudos dentro de um elemento 
HTML. A insergao sera imediatamente apos a tag de abertura do elemento c o 
conteudo a ser inserido pode scr uma string, um trecho de marca^ao HTML ou 
um objeto jQuery retirado do proprio documcnto. 

A unica diterenya entre os dois metodos e a sintaxe, como mostrado a seguir: 

$('p').prepend('<b>texto negrito</b>’); 

$('<b>texto negrito</b>').prependTo(’p'); 


Qual e a diferen^a entre after() e insertAfterO? 

Estes dois metodos destinam-se a inserir conteudos imediatamente apos um ele¬ 
mento HTML. O contciido a inserir podc scr uma string, um trecho de marca^ao 
HTML ou um objeto jQuery retirado do proprio documcnto. 

A unica dilerenya entre os dois metodos e a sintaxe, como mostrado a seguir: 

$('p')•after('<b>texto negrito</b>'); 

$('<b>texto negrito</b>').insertAfter('p'); 

Qual e a diferen^a entre beforeO e insertBeforeO? 

Estes dois metodos destinam-se a inserir conteudos imediatamente antes de um 
elemento HTML. O conteudo a inserir pode scr uma string, um trccho de mar- 
cagao HTML ou um objeto jQuery retirado do proprio documcnto. 

A unica diferen^a entre os dois metodos e a sintaxe, como mostrado a seguir: 

$('p').before('<b>texto negrito</b>'); 

$('<b>texto negrito</b>').insertBefore('p’); 
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Qual o comportamento dos metodos de inser^ao quando o conteudo a inserir e um objeto 
jQuery retirado do documento? 

Os metodos de inser^ao append(), appendToO, prepend(), prependToO, afterO, insertAf- 
ter(),before() e insertBeforeO podem receber como para metros de inser^ao objetos 
jQuery retirados do proprio documento. Neste caso, a inser^ao se processa de 
duas maneiras diferentes, dependendo da quantidade de alvos da insenjao. Veja 
um exemplo pratico para esclarecer esses comportamemos. 

Observe os codigos a seguir. 

► HTML: 


<body> 

<b>Texto negrito</b> 
<p>Primeiro paragrafo: </p> 
<p>Segundo paragrafo: </p> 
</body> 


► jQuery: 

<script type="text/javascript"> 

S(document).ready(function() { 

SCp'J.afterfSCb')); 

}); 

</script> 

O script jQuery proposto inscre dentro e no final dos dois paragrafos do 
documento a marca^ao c conteudo do elemento b. Assim, o resultado final e o 
mostrado a seguir: 

► HTML: 


<body> 

<b>Texto negrito</b> 

<p>Primeiro paragrafo: <b>Texto negrito</bx/p> 
<p>Segundo paragrafo: <b>Texto negrito</bx/p> 
</body> 


Note que os dois paragrafos receberam uma copia do elemento b. 
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Qual a diferen^a entre os metodos de inser^ao e o metodo html (val) ? 

Tal como os metodos dc inser^ao, o metodo html(va7) destina-se a inserir con¬ 
teudos, admite os mesmos parametros e comporta-se semelhantemente a esses 
metodos. A diferen^a e que o metodo html(va?) se destina a inserir conteudos 
em elementos vazios. Caso voce use esse metodo para inserir conteudos em urn 
elemento nao vazio, tais conteudos serao retirados e a inser^ao sera feita normal- 
mente, como se o elemento estivesse vazio. 

Observe a seguir a sintaxe dc emprego deste metodo: 

SCdiv.classeNome’). html(’<p>Paragrafo inserido</p>'); 

Inscrc um paragrafo nos divs cujo atributo classe tenha o valor classeNome. 

Qual e diferen^a entre os metodos emptyO e removeO? 

O metodo emptyO retira os conteudos c mantem o elemento no DOM e o metodo 
removeO retira o elemento do DOM. E importante ressaltar que o metodo removeO 
preserva o objeto jQuery pronto para uso posterior. 

Observe o exemplo mostrado a seguir: 

$('p#idNome’).removeO.appendTo('body'); 

Retira do DOM o elemento paragrafo cujoatributo id e idNome e insere-o,assim 
como seus conteudos, no elemento body. Caso tivesse usado o metodo emptyO, a 
inser^ao teria sido de um paragrafo vazio. 

Como construir uma chave de mudan^a de estilo? 

Esta e uma funcionalidade em desenvolvimento de sites encontrada com bastante 
frequencia. Ao usuario se fornece a opyao de navegar no site escolhendo um tema 
de sua preferencia entre alguns disponibilizados pclo desenvolvedor do site. Nao 
so mudangas no visual do site, mas tambem op^ao de temas para navegar com 
apresenta^ao em alto contraste, modo de impressao ou fontes aumentadas. 

Observe os codigos a seguir: 
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